什么是 tag-it？
tag-it 是一个 jQuery 插件，用于创建一个带有自动完成和删除标签功能的输入框。它可以方便地添加多个标签，如电子邮件、电话号码等。
如何安装 tag-it？
使用 npm 命令安装 tag-it：
--- ------- ------
在 HTML 中引入 jQuery 和 tag-it 的样式和脚本文件：
--------- ----- ------ ------ ----- ---------------- ------------- ------------ ----- ---------------- -------------------------------------------------------------------------------- ----- ---------------- -------------------------------- ------- ------ ------ ----------- ----------- ---------------------------- -- ------- ----------------------------------------------------------- ------- ------------------------------------------------------------------ ------- ------------------------------------- ------- -------
如何使用 tag-it？
初始化
在 JavaScript 中初始化 tag-it：
---------------------
自定义选项
tag-it 支持许多选项来定制标签编辑器的行为和外观。以下是一些常见选项：
- availableTags - 定义可用标签列表。
- allowSpaces - 允许空格作为标签的一部分。
- caseSensitive - 区分大小写。
- placeholderText - 输入框的占位符文本。
例如，以下代码将初始化一个 tag-it 编辑器，使其只允许选择 "red"、"green" 和 "blue" 这三个标签：
--------------------
-------------- ------- -------- -------
---事件处理
tag-it 提供了多种事件来响应用户与编辑器的交互。可以使用 jQuery 的 on() 方法在初始化后绑定这些事件。以下是一些常见事件：
- beforeTagAdded - 在添加新标签之前触发。
- afterTagAdded - 在添加新标签后触发。
- beforeTagRemoved - 在删除标签之前触发。
- afterTagRemoved - 在删除标签后触发。
例如，以下代码将输出删除标签时的标签名称：
--------------------
---------------- --------------- --- -
-------------------------
-
---示例代码
以下是一个完整的示例代码，演示如何初始化和配置 tag-it 编辑器以及如何捕获事件。
--------- -----
------
------
----- ----------------
------------- ------------
----- ---------------- --------------------------------------------------------------------------------
----- ---------------- --------------------------------
-------
------
------ ----------- ----------- ---------------- ----- --
------- -----------------------------------------------------------
------- ------------------------------------------------------------------
------- -------------------------------------
--------
------------ -
-- --- ------ ---
--------------------
-------------- ------- -------- --------
------------ -----
-------------- ------
---------------- ---- -----
---
-- --------
-------------------------------- --------------- --- -
---------------- ------ - - -------------
---
----------------------------------- --------------- --- -
-- -------------- --- ---- --- ---- -- ------ -- - ----------- - ------ -
------ ------
-
---
---------------------------------- ---------------
----------------------------------------------------------- ----------
---------------------------------------------------------------------------------------