介绍
jquery.devbridge-autocomplete 是一个基于 jQuery 的自动补全插件，可以用于搜索提示等场景。它支持本地数据和远程数据的使用方式。
安装
可以通过 npm 安装：
npm install jquery.devbridge-autocomplete
基本使用
引入依赖
在 HTML 文件中引入 jQuery 和 jquery.devbridge-autocomplete：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery.devbridge-autocomplete/1.4.12/jquery.autocomplete.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery.devbridge-autocomplete/1.4.12/jquery.autocomplete.min.js"></script>
初始化
$('#autocomplete').autocomplete({
lookup: ['Java', 'JavaScript', 'Python', 'Ruby']
});这段代码会将 #autocomplete 元素设置为自动补全输入框，并将可选项设置为 Java、JavaScript、Python 和 Ruby。
参数说明
lookup：可选项数组。serviceUrl：远程数据请求地址，需要返回 JSON 数据格式。minChars：触发自动补全的最小字符数。onSelect：选择某个选项时的回调函数。formatResult：自定义选项展示内容的回调函数。transformResult：处理远程数据的回调函数。
高级用法
自定义样式
通过修改 CSS 可以自定义自动补全框的样式：
-- -------------------- ---- -------
------------------------- -
----------------- -----
------- --- ----- -----
--------- -----
-
------------------------ -
-------- --- ----
------------ -------
------- --------
-
---------------------- -
----------------- --------
-
------------------------- ------ -
------------ -----
------ -----
-
------------------- -
-------- --- ----
-远程数据请求
可以通过 serviceUrl 参数设置远程数据请求地址，并使用 transformResult 处理返回的 JSON 数据。例如，使用 GitHub API 搜索项目：
-- -------------------- ---- -------
---------------------------------
----------- ---------------------------------------------
---------- ----
---------------- ------------------ -
------ -
------------ --------------------------------- -------------- -
------ - ------ --------------- ----- ------------- --
--
--
--
--------- -------------------- -
-----------------------------
-
---这段代码会将 #autocomplete 元素设置为自动补全输入框，并使用 GitHub API 搜索项目。当用户选择某个选项时，会打开该项目的页面。
自定义选项展示内容
可以使用 formatResult 回调函数自定义选项展示内容。例如，搜索关键字高亮显示：
$('#autocomplete').autocomplete({
lookup: ['Java', 'JavaScript', 'Python', 'Ruby'],
formatResult: function(suggestion, currentValue) {
var pattern = '(' + $.Autocomplete.utils.escapeRegExChars(currentValue) + ')';
return suggestion.value.replace(new RegExp(pattern, 'gi'), '<strong>$1</strong>');
}
});这段代码会将 #autocomplete 元素设置为自动补全输入框，并使用自定义的选项展示内容。当用户输入某个字符时，与该字符匹配的部分会以粗体显示。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
------------------------------------ ------------
----- ----------------
------- ----------------------------------------------------------------------------
----- ---------------- ----------------------------------------------------------------------------------------------------------
------- -------------------------------------------------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------