Jquery：实时筛选下拉菜单

在前端开发中，下拉菜单是常见的UI组件。然而，如果下拉菜单里有很多选项，用户要花费很多时间来找到他们需要的选项。所以我们可以通过输入关键词实时筛选下拉菜单，提高用户体验。

实现方法

使用Jquery库，结合HTML和CSS实现以下步骤：

1. 给下拉菜单添加input框

<select id="mySelect">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橘子</option>
  <option value="peach">桃子</option>
</select>
<input type="text" id="myInput" placeholder="搜索...">

1. 获取输入框的值

$("#myInput").on("keyup", function() {
  var value = $(this).val().toLowerCase();
});

1. 遍历下拉菜单并根据输入框的值筛选选项

$("#mySelect option").filter(function() {
  $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});

示例代码

完整示例代码如下：

-- -------------------- ---- -------
--------- -----
------
------
  ------- -----------------------------------------------------------
-------
------
  ------- --------------
    ------- -------------------------
    ------- --------------------------
    ------- --------------------------
    ------- -------------------------
  ---------
  ------ ----------- ------------ --------------------
  
  --------
    ------------------------- ---------- -
      --- ----- - ----------------------------
      ------------ -------------------------- -
        ---------------------------------------------------------- - ---
      ---
    ---
  ---------
-------
-------

学习和指导意义

学习这个实时筛选下拉菜单的方法，可以帮助我们提高前端开发技能，提高用户体验。

此外，在实际开发过程中，我们还可以通过优化算法、异步加载数据等方式进一步改善筛选效率和交互性。

总之，实时筛选下拉菜单是一个实用又有趣的前端小项目，如果你刚开始学习前端开发，它也是一个很好的练手项目。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27894