jquery模糊匹配下拉列表

原创

mob649e8158a948 2023-11-13 12:14:58 ©著作权

文章标签 jQuery 下拉列表 HTML 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e8158a948的原创作品，请联系作者获取转载授权，否则将追究法律责任

jquery模糊匹配下拉列表

下拉列表是网页中常见的 UI 元素之一，它可以为用户提供多个选项供其选择。而有时候，我们希望用户在输入框中输入关键字时，下拉列表能够根据关键字进行模糊匹配，并实时展示匹配的选项。本文将介绍如何使用 jQuery 实现这一功能，并提供代码示例供参考。

准备工作

在开始之前，我们需要做一些准备工作。首先，我们需要在 HTML 文件中引入 jQuery 库。可以从 jQuery 官方网站下载最新版的 jQuery，并将其引入项目中。

<script src="

接下来，我们需要创建一个下拉列表，并给其添加一个输入框，用于用户输入关键字。

<input type="text" id="keyword" placeholder="请输入关键字">
<select id="options">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
  <option value="option4">选项4</option>
  <option value="option5">选项5</option>
</select>

实现模糊匹配

我们可以使用 jQuery 的 keyup 事件来监听用户输入的关键字，并实时进行模糊匹配。具体实现如下：

$("#keyword").keyup(function() {
  var keyword = $(this).val().toLowerCase();
  $("#options option").each(function() {
    var optionValue = $(this).val().toLowerCase();
    if (optionValue.indexOf(keyword) !== -1) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});

上述代码中，我们首先获取输入框中的关键字，并将其转换为小写字母。然后，遍历下拉列表中的每个选项，获取其值并同样转换为小写字母。如果选项的值中包含关键字，则显示该选项，否则隐藏该选项。

完整示例

下面是一个完整的示例，包含 HTML 和 JavaScript 部分的代码。您可以将其复制到一个 HTML 文件中，并运行查看效果。

<!DOCTYPE html>
<html>
<head>
  <title>模糊匹配下拉列表</title>
  <script src="
</head>
<body>
  <h2>模糊匹配下拉列表</h2>
  <input type="text" id="keyword" placeholder="请输入关键字">
  <select id="options">
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
    <option value="option3">选项3</option>
    <option value="option4">选项4</option>
    <option value="option5">选项5</option>
  </select>

  <script>
    $("#keyword").keyup(function() {
      var keyword = $(this).val().toLowerCase();
      $("#options option").each(function() {
        var optionValue = $(this).val().toLowerCase();
        if (optionValue.indexOf(keyword) !== -1) {
          $(this).show();
        } else {
          $(this).hide();
        }
      });
    });
  </script>
</body>
</html>