介绍
jquery-ui.autocomplete.match 是一个基于 jQuery UI 的自动补全插件，它可以根据输入内容自动匹配给定数据集中的数据，并在用户输入时进行实时搜索，提供相应的补全选项，方便用户选择。
安装
可以通过 npm 安装 jquery-ui.autocomplete.match，在命令行中执行以下命令：
npm install jquery-ui.autocomplete.match --save
使用
使用 jquery-ui.autocomplete.match 非常简单，只需要在需要应用它的输入框元素上调用 autocomplete() 方法即可。
HTML
<input type="text" id="input">
JavaScript
-- -------------------- ---- ------- ------ - ---- --------- ------ ------------------------------------ ------ ------------------------------------------------------------ ----- ---- - - -------- --------- --------- --------- ------------- ------ ------- -- -------------------------- ------- ----- -------------- ----- ------- --------------- --- - --------------------------- - ---展开代码
在上面的示例中，source 参数用于定义自动补全的数据源，matchContains 参数用于启用 模糊匹配 模式，select 事件用于定义选项被选中后的回调函数。
演示
为了更好地演示 jquery-ui.autocomplete.match 的功能，我们可以创建一个搜索框，它可以实时搜索 GitHub 上的某个仓库的 Issues 列表。我们可以通过以下步骤来创建这个搜索框。
1. 创建 HTML
创建一个搜索框，它包含输入框和一个接收数据的列表。
<div id="search-box"> <input type="text" id="search-input"> <ul id="search-results"></ul> </div>
2. 加载数据
在 JavaScript 中，我们需要使用 GitHub API 来检索 Issues 列表。我们可以使用 Fetch API 来发起 API 请求，并将数据作为 JSON 解析。如果请求成功，我们就可以使用 autocomplete() 方法来将数据渲染到输入框中。
-- -------------------- ---- ------- ----- ------- - ------------------------- ----- ----- - --------- ----- ---- - ------------ ----- --- - ------------------------------------------- ---------- -------------- -- ---------------- ---------- -- - ----- ------ - -------------- -- ------------- --------------------------------- ------- ------- ------ ---- -------------- ---- --- ---展开代码
3. 实时搜索
现在，当用户输入时，我们可以通过输入框中的值来搜索 Issue 标题。我们可以使用 keyup 事件来监听用户的输入，并发起 API 请求。当请求成功时，我们就可以将匹配的结果渲染到结果列表中。
-- -------------------- ---- ------- ------------------------------ ---------- - ----- ----- - -------------- ----- --- - ------------------------------------------------------------ ---------- -------------- -- ---------------- ---------- -- - ----- ----- - ------------------- -- - ----- ----- - ----------- ----- --- - -------------- ------ ------- --------------------------------- --- --------------------------------- --- ---展开代码
结论
jquery-ui.autocomplete.match 是一个非常方便的自动补全插件，它可以帮助我们快速实现搜索框等功能。在使用该插件时，你需要提供一个数据源，选择相应的匹配模式，并定义选中后的回调函数等。借助该插件，我们可以更轻松地创建各种自动补全输入框，极大地提高了 Web 应用的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600553c281e8991b448d105d
