html下拉搜索框怎么写

HTML 中的下拉搜索框可以使用 `<select>` 和 `<option>` 标签结合 JavaScript 实现。具体步骤如下：

1. 创建一个输入框和一个下拉选框，用于用户输入和选择。

<input type="text" id="search-box">
<select id="select-box">
  <option value="">请选择一个选项</option>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
  <option value="option4">选项4</option>
</select>

2. 使用 JavaScript 监听输入框的 `input` 事件，根据用户输入的值动态筛选下拉选框中的选项，并将筛选后的选项显示出来。

const searchBox = document.getElementById('search-box');
const selectBox = document.getElementById('select-box');

searchBox.addEventListener('input', function() {
  const searchTerm = searchBox.value.toLowerCase();
  const options = selectBox.options;
  
  for (let i = 0; i < options.length; i++) {
    const option = options[i];
    const text = option.text.toLowerCase();
    
    if (text.indexOf(searchTerm) !== -1) {
      option.style.display = '';
    } else {
      option.style.display = 'none';
    }
  }
});

在这个例子中，我们首先获取输入框和下拉选框的 DOM 元素，然后使用 `addEventListener` 方法监听输入框的 `input` 事件。在事件处理函数中，我们获取输入框中的值，将其转化为小写字母，并遍历下拉选框中的每个选项。如果选项的文本内容包含了用户输入的值，我们就将其显示出来，否则就将其隐藏起来。

注意，这个例子只是一个简单的实现，实际使用时可能需要考虑更复杂的情况，比如异步加载选项等。