创建下拉式搜索菜单框

要创建一个下拉式搜索菜单框，可以使用HTML、CSS和JavaScript来实现。下面是一个基本的示例代码：

HTML代码：

<input type="text" id="search-input" placeholder="Search">
<div id="search-results"></div>

CSS代码：

#search-results {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 200px;
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
}

#search-results a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

#search-results a:hover {
  background-color: #ddd;
}

JavaScript代码：

const searchInput = document.getElementById('search-input');
const searchResults = document.getElementById('search-results');

searchInput.addEventListener('input', function() {
  const searchText = searchInput.value.toLowerCase();
  const matchedResults = [];

  // 在这里进行搜索逻辑，匹配搜索文本并将结果存储在matchedResults数组中

  showResults(matchedResults);
});

function showResults(results) {
  searchResults.innerHTML = '';

  if (results.length > 0) {
    results.forEach(function(result) {
      const link = document.createElement('a');
      link.href = result.url;
      link.textContent = result.title;
      searchResults.appendChild(link);
    });
    searchResults.style.display = 'block';
  } else {
    searchResults.style.display = 'none';
  }
}

在上面的代码中，我们首先通过document.getElementById方法获取搜索输入框和搜索结果的元素。然后，我们通过addEventListener方法监听搜索输入框的input事件，当用户输入内容时会触发该事件。在事件处理程序中，我们获取输入框的值并转换为小写字母，然后进行搜索匹配的逻辑。匹配到的结果会存储在matchedResults数组中，并通过showResults函数展示在搜索结果框中。

在showResults函数中，我们首先清空搜索结果框的内容，然后根据匹配到的结果动态创建链接元素，并添加到搜索结果框中。如果没有匹配到结果，搜索结果框会隐藏起来。