npm 包 bootstrap-tagsinput-qs 使用教程

前言

bootstrap-tagsinput-qs 是一个基于 Bootstrap 框架的标签输入插件，可以方便地实现标签输入、自动完成等功能。本篇文章将介绍该插件的使用方法，以及如何在自己的项目中使用它。

安装

首先，需要安装 npm 包：

npm install bootstrap-tagsinput-qs

该插件依赖于 jQuery 和 Bootstrap，因此需要先安装它们：

npm install jquery bootstrap

使用

HTML

在 HTML 中，需要添加以下代码：

<input type="text" id="tags-input" />

JavaScript

引入必需的库文件：

import $ from 'jquery';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-tagsinput-qs/dist/bootstrap-tagsinput.css';
import 'bootstrap-tagsinput-qs/dist/bootstrap-tagsinput.js';

然后初始化插件：

$('#tags-input').tagsinput({
    tagClass: 'label label-primary',
    confirmKeys: [13, 188, 32] // 回车键、逗号、空格
});

配置参数

• tagClass: string：标签的 CSS 类名，默认为 'badge badge-info'。
• focusClass: string：输入框聚焦时的 CSS 类名，默认为 'focus'。
• confirmKeys: number[]：确认标签的按键数组，默认为 [13]（回车键）。

具体的参数说明，可以参考官方文档：https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/。

示例代码

基础用法

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

后端数据自动完成

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

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

总结

本文介绍了基于 Bootstrap 框架的标签输入插件 bootstrap-tagsinput-qs 的使用方法，包括安装、配置参数和示例代码。希望对大家学习前端开发有所帮助。

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