介绍
jquery.devbridge-autocomplete 是一个基于 jQuery 的自动补全插件，可以用于搜索提示等场景。它支持本地数据和远程数据的使用方式。
安装
可以通过 npm 安装：
--- ------- -----------------------------
基本使用
引入依赖
在 HTML 文件中引入 jQuery 和 jquery.devbridge-autocomplete：
------- ---------------------------------------------------------------------------- ----- ---------------- ---------------------------------------------------------------------------------------------------------- ------- -----------------------------------------------------------------------------------------------------------------
初始化
---------------------------------
------- -------- ------------- --------- -------
---这段代码会将 #autocomplete 元素设置为自动补全输入框，并将可选项设置为 Java、JavaScript、Python 和 Ruby。
参数说明
lookup：可选项数组。serviceUrl：远程数据请求地址，需要返回 JSON 数据格式。minChars：触发自动补全的最小字符数。onSelect：选择某个选项时的回调函数。formatResult：自定义选项展示内容的回调函数。transformResult：处理远程数据的回调函数。
高级用法
自定义样式
通过修改 CSS 可以自定义自动补全框的样式：
------------------------- -
----------------- -----
------- --- ----- -----
--------- -----
-
------------------------ -
-------- --- ----
------------ -------
------- --------
-
---------------------- -
----------------- --------
-
------------------------- ------ -
------------ -----
------ -----
-
------------------- -
-------- --- ----
-远程数据请求
可以通过 serviceUrl 参数设置远程数据请求地址，并使用 transformResult 处理返回的 JSON 数据。例如，使用 GitHub API 搜索项目：
---------------------------------
----------- ---------------------------------------------
---------- ----
---------------- ------------------ -
------ -
------------ --------------------------------- -------------- -
------ - ------ --------------- ----- ------------- --
--
--
--
--------- -------------------- -
-----------------------------
-
---这段代码会将 #autocomplete 元素设置为自动补全输入框，并使用 GitHub API 搜索项目。当用户选择某个选项时，会打开该项目的页面。
自定义选项展示内容
可以使用 formatResult 回调函数自定义选项展示内容。例如，搜索关键字高亮显示：
---------------------------------
------- -------- ------------- --------- --------
------------- -------------------- ------------- -
--- ------- - --- - --------------------------------------------------- - ----
------ ---------------------------- --------------- ------ -----------------------
-
---这段代码会将 #autocomplete 元素设置为自动补全输入框，并使用自定义的选项展示内容。当用户输入某个字符时，与该字符匹配的部分会以粗体显示。
示例代码
--------- -----
------
------
------------------------------------ ------------
----- ----------------
------- ----------------------------------------------------------------------------
----- ---------------- ----------------------------------------------------------------------------------------------------------
------- -------------------------------------------------------
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------