JS实现搜索记录框

要实现搜索记录框，可以使用HTML、CSS和JavaScript。以下是一个简单的实现示例：

HTML部分：

<input type="text" id="search-box">
<ul id="search-history"></ul>

CSS部分：

#search-history {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#search-history li {
  cursor: pointer;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 5px;
}

JavaScript部分：

const searchBox = document.getElementById('search-box');
const searchHistory = document.getElementById('search-history');

// 监听搜索框输入事件
searchBox.addEventListener('input', function() {
  const value = this.value.trim();
  if (value.length > 0) {
    // 显示搜索历史
    showHistory(value);
  } else {
    // 隐藏搜索历史
    hideHistory();
  }
});

// 监听搜索历史点击事件
searchHistory.addEventListener('click', function(event) {
  const target = event.target;
  if (target.tagName === 'LI') {
    // 将搜索历史回填到搜索框
    searchBox.value = target.innerText;
    // 隐藏搜索历史
    hideHistory();
  }
});

// 显示搜索历史
function showHistory(value) {
  // TODO: 获取搜索历史数据
  const historyData = ['Apple', 'Banana', 'Cherry', 'Durian', 'Eggplant'];
  // 清空搜索历史列表
  searchHistory.innerHTML = '';
  // 遍历搜索历史数据，添加到列表中
  historyData.forEach(function(item) {
    if (item.indexOf(value) !== -1) {
      const li = document.createElement('li');
      li.innerText = item;
      searchHistory.appendChild(li);
    }
  });
  // 显示搜索历史列表
  searchHistory.style.display = 'block';
}

// 隐藏搜索历史
function hideHistory() {
  // 隐藏搜索历史列表
  searchHistory.style.display = 'none';
}

这个示例会在搜索框输入文字时，根据输入的内容匹配搜索历史，并将匹配到的搜索历史显示在下拉框中。用户可以点击下拉框中的搜索历史，将其回填到搜索框中。