JQuery搜索框自动补全(模糊匹配)功能实现示例

下面是针对“JQuery搜索框自动补全(模糊匹配)功能实现示例”的完整攻略。

1. 引入 jQuery UI

在实现自动补全功能之前，需要先引入 jQuery UI 库。在文档末尾添加如下代码即可：

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

2. HTML 部分

接下来，需要在页面 HTML 中添加一个输入框和一个待补全的数据源。如下所示：

<input type="text" id="search-box"/>
<ul id="suggestions"></ul>

3. JavaScript 部分

在完成 HTML 部分的代码编写后，接下来需要编写 JavaScript 部分代码实现自动补全功能。

3.1 初始化自动补全组件

首先在页面加载完成时，创建自动补全组件并将其绑定到输入框上，如下所示：

$(function() {
  $("#search-box").autocomplete({
    source: ["Java", "PHP", "Python", "JavaScript"]
  });
});

上述代码中，source 参数指定了待补全的数据源列表，即输入框在输入时将会提示这些数据源中的关键词。

3.2 实现模糊匹配

默认情况下，自动补全组件会根据输入框中的文本与数据源中的每个关键词进行完全匹配。在本示例中，我们需要实现模糊匹配功能，让组件根据输入框中的文本与数据源中的每个关键词进行模糊匹配。

实现代码如下：

$(function() {
  $("#search-box").autocomplete({
    source: function(request, response) {
      var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
      response($.grep(["Java", "PHP", "Python", "JavaScript"], function(item){
          return matcher.test(item);
      }));
    }
  });
});

上述代码中，我们重写了 source 参数的值，将其指向一个函数。该函数接收两个参数：request 和 response，分别代表当前输入框中的文本和自动补全组件的响应函数。

在函数内部，首先创建一个正则表达式对象 matcher，使用 RegExp 函数将输入框中的文本转换为正则表达式，实现大小写不敏感的模糊匹配。

接下来，使用 $.grep 函数过滤出符合模糊匹配条件的关键词并返回即可。

示例说明

示例一

在 source 参数中指定了一个包含四个数据源的数组，即 "Java"、"PHP"、"Python" 和 "JavaScript"。用户输入时，组件会列出所有与输入文本匹配的数据源。例如，当用户输入 "Ja" 时，会出现 "Java" 和 "JavaScript" 两个关键词的提示。

示例二

重写 source 参数的值，实现模糊匹配功能。用户输入时，组件仅会列出所有与输入文本模糊匹配的数据源。例如，当用户输入 "Ja" 时，会出现 "Java" 和 "JavaScript" 两个关键词的提示，而 "PHP" 和 "Python" 两个关键词则不会出现。