html下拉列表模糊查询

要实现下拉列表的模糊查询，你可以使用JavaScript来实现，具体步骤如下：

1. 创建一个下拉列表，用于存放所有可选项；
2. 监听输入框的输入事件，获取输入的值；
3. 遍历下拉列表中的所有选项，与输入的值进行比对；
4. 将符合条件的选项添加到一个新的下拉列表中，并显示出来。

以下是一个简单的实现代码：

HTML:

<input type="text" id="input">
<select id="options">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
  <option value="grape">葡萄</option>
  <option value="watermelon">西瓜</option>
</select>

JavaScript:

const input = document.getElementById('input');
const options = document.getElementById('options');

// 监听输入框的输入事件
input.addEventListener('input', () => {
  const value = input.value.trim();
  const newOptions = document.createElement('select');
  
  // 遍历下拉列表中的所有选项
  for (let i = 0; i < options.length; i++) {
    const optionValue = options[i].value;
    
    // 与输入的值进行比对
    if (optionValue.includes(value)) {
      const newOption = document.createElement('option');
      newOption.value = optionValue;
      newOption.textContent = options[i].textContent;
      newOptions.appendChild(newOption);
    }
  }
  
  options.replaceWith(newOptions);
});

该代码会监听输入框的输入事件，获取输入的值，然后遍历下拉列表中的所有选项，将符合条件的选项添加到一个新的下拉列表中，并替换原有的下拉列表。注意，该代码只是一个简单的实现，还需要根据具体需求进行修改和扩展。