JQuery select支持模糊搜索

在使用 jQuery 进行 select 下拉框的模糊搜索时，可以通过监听输入框的键盘输入事件，然后使用 jQuery 的选择器和属性过滤方法来实现模糊搜索的功能。以下是一个简单的示例代码：

HTML 部分：

<select id="mySelect">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
  <option value="grape">Grape</option>
  <!-- 其他选项 -->
</select>
<input type="text" id="searchInput" placeholder="Search...">

jQuery 部分：

$(document).ready(function() {
  $('#searchInput').on('input', function() {
    var searchTerm = $(this).val().toLowerCase();
    $('#mySelect option').show();
    $('#mySelect option').not('[value*="' + searchTerm + '"]').hide();
  });
});

在这个示例中，我们监听了输入框的 input 事件，当用户键入时触发。然后，我们获取输入框的值，将其转换为小写，并使用属性选择器 [value*="' + searchTerm + '"] 来选择那些 value 包含搜索词的 <option> 元素。.show() 方法显示这些选项，而 .not() 方法排除的那些不包含搜索词的选项，然后 .hide() 方法隐藏这些选项。这样就实现了模糊搜索的功能。