简介
bootstrap-hardskilled-extend-select 是一个基于 Bootstrap 的扩展选择器，它可以让用户通过多种方式输入并选择项。它支持标签、搜索、分组和异步加载等功能，使用户的交互体验更加友好和便捷。
安装
可以通过 npm 安装 bootstrap-hardskilled-extend-select，命令如下：
--- ------- -----------------------------------
当然，也可以直接下载源代码。
使用
引入文件
首先需要引入必须的文件：
----- ---------------- ----------------------------------------------------------------------------- ----- ---------------- ------------------------------------------------------- ------- ---------------------------------------------------------------- ------- ----------------------------------------------------------------------------------------- ------- ----------------------------------------------------------------------------------- ------- --------------------------------------------------------------
其中，第一行引入了 Bootstrap 的 CSS 文件，第二行引入了 bootstrap-hardskilled-extend-select 的 CSS 文件，第三行引入了 jQuery，第四行引入了 Popper.js，第五行引入了 Bootstrap 的 JS 文件，最后一行引入了 bootstrap-hardskilled-extend-select 的 JS 文件。
HTML 结构
然后需要添加 HTML 结构，示例代码如下：
---- -------------------
------ --------------------------
------- ------------- -------------------- ---------
------- ----------------------
------- ----------------------
------- ----------------------
---------
------其中，form-group 和 label 是 Bootstrap 的 CSS 类，form-control 也是 Bootstrap 的 CSS 类，multiple 属性表示可以多选。
初始化
接下来需要进行初始化操作，示例代码如下：
----------------------------------
--------- -----
----------- ----
---其中，hardskilledSelect 是 bootstrap-hardskilled-extend-select 的 API，taggable 表示可以添加标签，allowClear 表示可以清除选择。
高级用法
bootstrap-hardskilled-extend-select 还支持一些高级用法，例如搜索、分组和异步加载。示例代码如下：
----------------------------------
------------ ------
---------------- -----
---------------- ----------
------------ -----
----------- -----
---------------------- --------
-------------------- -----
------------------- ----------
----------- -----
-------------- -----
---------------- -------
---------------- -----
------------------ -----
------- -----
----------------------- -----
------------------------- -----
----------------- ------
--------------- -----
------ -----
-------------- -----------
----------- ---------------- -
------ --------------------------------------------
--
------ -----
------------ ---------------------------------
------------ ------
------------ -----
-------------- --------------- --------- -
--------
---- ---------------
--------- -------
-------- -------------- -
---------------
-
---
-
---其中，placeholder 表示占位符，searchHighlight 表示搜索时是否高亮匹配项，optionSelectors 表示选择项的 CSS 选择器，selectOnTab 表示按 Tab 键时是否选择当前项，liveSearch 表示是否实时搜索，liveSearchPlaceholder 表示实时搜索的占位符，liveSearchNormalize 表示是否忽略大小写，liveSearchSelector 表示实时搜索的 CSS 选择器，actionsBox 表示是否显示操作框，selectAllText 表示全选按钮的文字，deselectAllText 表示全部取消按钮的文字，enableSelectAll 表示是否开启全选功能，enableDeselectAll 表示是否开启全部取消功能，filter 表示是否筛选结果，includeSelectAllOption 表示是否包含全选项，includeDeselectAllOption 表示是否包含全部取消项，disabledFieldset 表示是否禁用 fieldset 元素，disableIfEmpty 表示是否禁用选择框为空时，group 表示是否分组显示，groupSelector 表示分组的 CSS 选择器，groupValue 表示获取分组值的回调函数，async 表示是否异步加载，asyncTarget 表示异步加载的目标元素的属性，asyncMethod 表示异步加载的方式，asyncSearch 表示是否异步搜索，asyncLoadData 表示异步加载数据的回调函数。
总结
bootstrap-hardskilled-extend-select 是一个功能齐全的扩展选择器，它可以大幅度提高用户的体验，并且可以极大地帮助前端开发者提高开发效率。通过本篇文章的学习，相信读者已经掌握了使用 bootstrap-hardskilled-extend-select 的方法。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c81ccdc64669dde4cd5