npm 包 bootstrap-tagsinput 使用教程

简介

Bootstrap Tags Input 是一个基于 Bootstrap 的 jQuery 插件，用于创建一个可编辑、多标签输入框。它支持自定义分隔符、标签样式和回调函数等功能，是一款方便易用的标签输入工具。

安装

你可以使用 npm 或者手动下载包来安装 bootstrap-tagsinput。

使用 npm 安装：

npm install bootstrap-tagsinput

手动下载包后，在 HTML 文件中引入相关文件即可：

<link rel="stylesheet" href="path/to/bootstrap-tagsinput.css">
<script src="path/to/jquery.js"></script>
<script src="path/to/bootstrap-tagsinput.js"></script>

使用方法

初始化

将一个普通的文本框转化成标签输入框，只需要在文本框上调用 tagsinput() 方法即可：

$('input').tagsinput();

也可以通过传递选项来进行初始化：

$('input').tagsinput({
  tagClass: 'label label-primary',
  maxTags: 3,
  confirmKeys: [13, 44],
  ...
});

API

Bootstrap Tags Input 提供了一些 API 方法，可以让你对标签输入框进行控制。

addTag(tag, [options])

添加一个标签到输入框中。

$('input').tagsinput('addTag', 'tag');

removeTag(tag)

从输入框中删除指定的标签。

$('input').tagsinput('removeTag', 'tag');

removeAll()

删除所有标签。

$('input').tagsinput('removeAll');

destroy()

销毁输入框和相关事件。

$('input').tagsinput('destroy');

事件

Bootstrap Tags Input 提供了以下事件：

你可以使用 jQuery 的 on() 方法来绑定这些事件：

$('input').on('beforeItemAdd', function(event) {
  // ...
});

示例

下面是一个基本的 Bootstrap Tags Input 示例：

-- -------------------- ---- -------
--------- -----
------
------
  ----- ----------------
  ---------------- ---- ----- ----------
  ----- ---------------- ---------------------------------------
  ------- ---------------------------------
  ------- ----------------------------------------------
-------
------
  ---- -------------------
    ------ ---------------------
    ------ ----------- --------- ----------- -------- --
  ------

  --------
    ---------------------------- -
      ----------------------
        --------- ------ ---------------
        -------- --
        ------------ ---- ----
        ---------- ----
      ---
    ---
  ---------
-------
-------

在这个示例中，我们创建了一个名为 tags 的输入框，并将它转换成标签输入框。我们还传递了一些选项来自定义标签的样式和输入框的行为。

结论

Bootstrap Tags Input 是一个非常方便易用的标签输入工具，可以帮助你快速创建多标签输入框。通过本文的介绍和示例，相信你已经掌握了如何使用它。如果你有任何问题或建议，请留言让我知道。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34097