简介
jquery-textcomplete 是一款jquery插件，用于为文本输入框实现自动补全功能。它支持丰富的API和事件回调，还可以定制化和扩展。
安装
可以通过npm安装jquery-textcomplete:
npm install jquery-textcomplete
也可以通过CDN直接引入:
<script src="https://cdn.jsdelivr.net/npm/jquery-textcomplete@latest"></script>
基础使用
首先，需要引入jquery和jquery-textcomplete。然后，在文本输入框绑定textComplete方法即可。代码如下：
-- -------------------- ---- -------
------ ----------- --------------
------- -----------------------------------------------------------
------- -----------------------------------------------------------------------
--------
-------------------------
- -- -------
------ ----------------
------- -------------- --------- -
-- ----------------------
--------------------- -
----- -------- - -
- --- -- ----- ------ --
- --- -- ----- ------ --
- --- -- ----- ------ --
-
-------------------
-- ----
--
-------- -------------- -
------ --- - --------- - - --
-
-
--
---------解释一下上面的代码：
- $('input').textcomplete：绑定textComplete方法到input元素上。
- [{...}]：补全项对象列表。这里只有一个对象，表示输入框中匹配
@符号的字符串。 - match: 正则表达式，匹配输入框中的文本。
- search: 回调函数，在匹配的文本发生变化时(如用户继续输入)搜索和返回补全项数据。该函数有两个参数：输入框中的文本和callback回调函数。开发者需要在函数中异步调用API或发起Ajax请求，当异步请求完成后，调用callback回调函数返回数据。
- replace：回调函数，接收search回调函数返回的数据并处理。本例中，将返回的对象的
name值替换掉输入框中的字符串，然后加上空格。
高级特性
jquery-textcomplete除了支持上述基础用法，还有丰富的API和事件回调，支持定制化和扩展功能。
API
textComplete绑定到输入框上后，返回一个API对象，可以获取当前配置、手动开启和关闭控件等。示例如下：
-- -------------------- ---- ------- ----- ----- - ------------------------------- -- ----------- ----- ------ - ----------------------------------- -- ------ -------------------------------------- -- ------ ----------------------------------------
事件
jquery-textcomplete支持事件回调，可以在特定时机执行特定业务逻辑。以下是jqury-textcomplete支持的事件：
- loading：搜索开始时触发。
- search：搜索完成时触发。
- shown：自动补全面板展示时触发。
- hidden：自动补全面板隐藏时触发。
- select：选中补全项时触发。
- show：每次需要显示自动补全面板之前触发。可以在处理函数中或者异步查询后展示面板。
- hide：隐藏自动补全面板前触发。
示例如下：
-- -------------------- ---- -------
-------------------------
-
------ ----------------
------- -------------- --------- -
--------------------- -
----- -------- - -
- --- -- ----- ------ --
- --- -- ----- ------ --
- --- -- ----- ------ --
-
-------------------
-- ----
--
-------- -------------- -
------ --- - --------- - - --
--
------- ---------------------- -
-------------------------- -- -----------
--
------- ---------------------- -
------------------------- -- -----------
-
-
--插件
jquery-textcomplete除了自带一些常用的自动补全实现外，还可以通过插件扩展功能。常见的插件有：
- adjustWidth：自动调整宽度
- persist：记录最近选择的项，进行下次匹配
- cache：缓存结果，避免多余请求
- filter：搜索结果过滤
- footer：额外插入底部元素，如链接
- wrapping：包裹结果
插件的引入方式如下：
$('input').textcomplete('register', [pluginName], [options]);options参数是插件需要的配置参数，每个插件都有自己的配置参数。
总结
jquery-textcomplete是一款非常实用的jquery插件，可以方便的为文本输入框实现自动补全功能。它支持丰富的API和事件回调，还可以通过插件扩展定制化功能。适用于各种web开发项目，非常值得推荐和学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcb52b5cbfe1ea06125ac