js搜索框双重下拉菜单

JS搜索框双重下拉菜单是一种常见的网页搜索功能，它可以提供更加便捷和智能的搜索体验。下面是一种实现方式：

1. HTML结构：

<input type="text" id="searchInput" placeholder="请输入关键词">
<div id="searchResults"></div>

2. JavaScript代码：

// 获取输入框和搜索结果容器
var searchInput = document.getElementById("searchInput");
var searchResults = document.getElementById("searchResults");

// 监听输入框的输入事件
searchInput.addEventListener("input", function() {
  // 清空搜索结果
  searchResults.innerHTML = "";

  // 获取输入框的值
  var keyword = searchInput.value;

  // 根据关键词进行搜索
  var results = search(keyword);

  // 显示搜索结果
  showResults(results);
});

// 模拟搜索函数，返回搜索结果数组
function search(keyword) {
  // 这里可以根据实际需求进行搜索逻辑的实现
  // 返回一个包含搜索结果的数组
  return [
    "搜索结果1",
    "搜索结果2",
    "搜索结果3"
  ];
}

// 显示搜索结果
function showResults(results) {
  // 遍历搜索结果数组
  for (var i = 0; i < results.length; i++) {
    // 创建结果项元素
    var resultItem = document.createElement("div");
    resultItem.innerText = results[i];

    // 将结果项添加到搜索结果容器中
    searchResults.appendChild(resultItem);
  }
}

以上代码实现了一个简单的搜索框双重下拉菜单功能。当用户在输入框中输入关键词时，会触发输入事件，然后根据输入的关键词进行搜索，并将搜索结果显示在下拉菜单中。