写一个类似百度搜索框，能根据输入显示推荐列表

这是一个简单的示例代码，使用了HTML、CSS和JavaScript：

HTML：

<div class="search-box">
  <input type="text" placeholder="在此输入搜索内容" class="search-input">
  <ul class="suggestions">
    <!-- 推荐列表项将动态添加到这里 -->
  </ul>
</div>

CSS：

.search-box {
  position: relative;
  display: inline-block;
}

.search-input {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  width: 200px;
  max-height: 200px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background-color: #fff;
  list-style: none;
}

.suggestions li {
  padding: 10px;
  cursor: pointer;
}

.suggestions li:hover {
  background-color: #f5f5f5;
}

JavaScript：

const searchInput = document.querySelector('.search-input');
const suggestions = document.querySelector('.suggestions');

const search = () => {
  const q = searchInput.value.trim().toLowerCase();
  if (q.length === 0) {
    suggestions.innerHTML = '';
    suggestions.style.display = 'none';
    return;
  }
  // TODO: 根据输入生成推荐列表
  const results = ['搜索结果1', '搜索结果2', '搜索结果3'];
  suggestions.innerHTML = results.map(result => `<li>${result}</li>`).join('');
  suggestions.style.display = 'block';
};

searchInput.addEventListener('input', search);
document.addEventListener('click', event => {
  if (event.target !== searchInput) {
    suggestions.style.display = 'none';
  }
});

这段代码实现了当用户输入内容时，生成并显示推荐列表。当用户点击页面的其他地方时，隐藏推荐列表。需要根据具体需求修改TODO部分的代码，例如从服务器获取推荐结果。