介绍
jquery.autocomplete-multiple 是一个能够提供自动补全多选功能的 jQuery 插件。该插件利用了 jQuery UI Autocomplete 控件的能力，提供了多选的功能，同时在用户添加或移除标签时提供了事件回调，方便定制。
安装
在项目中使用 npm 安装：
--- ------- ------ ----------------------------
使用
在你的 HTML 文件中，引入必要的库和代码：
----- ---------------- -------------------------------------------------------------------------- ------- ----------------------------------------------------- ------- ------------------------------------------------------------ ------- ---------------------------------------------------
准备好需要自动补全的输入框元素：
------ ----------- --------------
在 JavaScript 中，将其转换并设置：
------------------------------------- -- -- ---
选项
jquery.autocomplete-multiple 提供了许多选项，可以帮助你定制自己的自动补全多选控件。下面列出了一些重要选项和用法示例：
url
当需要从服务器获取数据时，你可以通过此选项设置数据源 URL：
------------------------------------- ---- ----------- ---
data
可以通过此选项直接传递数据，而不是从服务器获取：
------------------------------------- ----- ------- ------ ---
onChange
每当用户添加或移除标签时，都会触发此事件。可以通过它完成一些数据操作：
-------------------------------------
--------- -------- ------- ----- -
------------------
-
---minLength
可以通过此选项设置什么时候开始搜索，下面的代码表示用户输入至少两个字符后，才开始搜索：
------------------------------------- ---------- - ---
maxTags
可以使用此选项限制用户可以添加的最大标签数：
------------------------------------- -------- - ---
完整示例
--------- -----
----- ----------
------
----- ----------------
------------- ------------ -------- ----------------
----- ---------------- --------------------------------------------------------------------------
-------
------
------ ----------- --------------
------- -----------------------------------------------------
------- ------------------------------------------------------------
------- ---------------------------------------------------
--------
-------------------------------------
---- ------------
---------- --
-------- --
--------- -------- ------- ----- -
------------------
-
---
---------
-------
-------总结
jquery.autocomplete-multiple 是一个非常实用而且方便的 jQuery 插件，可以帮助你快速构建一个自动补全多选控件。本文介绍了 jquery.autocomplete-multiple 的使用方法和一些重要选项。希望它可以帮助你在项目中更好地使用该插件。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005752781e8991b448ea426