JS实现select框实现模糊搜索

您可以使用JavaScript来实现模糊搜索的功能，以下是一个简单的示例代码：

HTML部分：

<select id="select">
  <option value="1">Apple</option>
  <option value="2">Banana</option>
  <option value="3">Cherry</option>
  <option value="4">Orange</option>
</select>

JavaScript部分：

document.getElementById('select').addEventListener('input', function() {
  var input, filter, option, i;
  input = this.value;
  filter = input.toUpperCase();
  options = this.getElementsByTagName('option');

  for (i = 0; i < options.length; i++) {
    if (options[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
      options[i].style.display = '';
    } else {
      options[i].style.display = 'none';
    }
  }
});

以上代码会监听select框的input事件，当用户输入内容时，会根据用户输入的内容来过滤选项。只有当某个选项的内容包含了用户输入的内容时，该选项才会显示出来，否则会被隐藏。这样就实现了模糊搜索的功能。

原文链接: https://blog.csdn.net/hexadecimal_001/article/details/139393277

目录