在前端开发中，标签输入框是一个常见的需求。taggle 是一个基于 jQuery 的 npm 包，可以帮助我们快速实现标签输入框功能。本文将介绍如何使用 taggle，并提供详细的示例代码。
安装
使用 npm 可以方便地安装 taggle：
npm install taggle --save
引入
在 HTML 中引入 jQuery 和 taggle：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="path/to/taggle.min.js"></script>
使用
基础用法
创建一个 input 元素，然后通过调用 taggle() 方法来初始化标签输入框：
<input type="text" id="myTags" />
<script>
$('#myTags').taggle();
</script>这样就完成了最简单的标签输入框。用户可以在输入框中输入标签，按下回车键或逗号提交标签。已经添加的标签可以通过点击删除按钮或按下 Backspace 键来删除。
自定义选项
除了基本的用法外，我们还可以通过传递一个对象来自定义选项。下面是一些可用的选项：
allowedTags：一个字符串数组，指定允许的标签。如果未指定，则允许任何标签。forbiddenTags：一个字符串数组，指定禁止的标签。preset：一个字符串数组，指定默认的标签。这些标签将在输入框中显示，用户可以删除它们或添加其他标签。submitKeys：一个数字数组，指定提交标签的键码。默认为 [9, 13, 188]，即 Tab、Enter 和逗号键。delimiter：一个字符串，指定标签之间的分隔符。默认为逗号。placeholder：一个字符串，指定输入框的占位符文本。
下面是一个自定义选项的示例：
-- -------------------- ---- -------
------ ----------- ----------- --
--------
---------------------
------------ -------------- ------- -------
-------------- ------- --------
------- -------------- --------
----------- -----
---------- ----
------------ ------
---
---------事件
taggle 提供了一些事件，可以让我们在特定情况下执行自定义代码。下面是一些可用的事件：
onTagAdd：当添加标签时触发。onTagRemove：当删除标签时触发。onBeforeTagAdd：在添加标签之前触发，可以取消添加操作。onBeforeTagRemove：在删除标签之前触发，可以取消删除操作。onClick：当点击标签或删除按钮时触发。
下面是一个使用 onTagAdd 事件的示例：
-- -------------------- ---- -------
------ ----------- ----------- --
--------
---------------------
--------- --------------- ---- -
------------------- - -----
-
---
---------方法
taggle 还提供了一些方法，可以让我们在代码中动态操作标签。下面是一些可用的方法：
add：添加一个标签。remove：删除指定位置或指定标签的标签。getTags：获取当前所有标签。
下面是一个使用 add 和 remove 方法的示例：
-- -------------------- ---- -------
------ ----------- ----------- --
------- -------------------------
------- ----------------------------
--------
--- ----- - ----------------------
----------------------------- -
------------------- ---- ------
---
-------------------------------- -
---------------------- ----
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------