当前位置:主页 > JavsScript库 > 表单 >

Bootstrap 5 的简易标签输入组件 - Tags.js
栏目分类:表单   发布日期:2021-08-13   浏览次数:

Bootstrap 5 的原生 JavaScript (ES6) 扩展,可将多选框转换为用户友好的标签输入组件。

使用

1. 导入Tags.js。

import Tags from "./tags.js";

2. 初始化库。

Tags.init();

3. 就是这样。它会自动将所有具有该multi属性的选择框转换为标签输入,您可以在输入时从建议列表中选择选项。

<select class="form-select" id="validationTags" multiple>

  <option selected disabled hidden value="">选择一个标签...</option>

  <option value="1" selected="selected">JavaScript</option>

  <option value="2">HTML5</option>

  <option value="3">CSS3</option>

  <option value="4">jQuery</option>

  <option value="5">React</option>

  <option value="6">Angular</option>

  <option value="7">Vue</option>

  <option value="8">Python</option>

</select>

<div class="invalid-feedback">请选择一个有效的标签。</div>

4.data-allow-new="true"如果您想添加新选项,请在选择框中添加 。

<select class="form-select" id="validationTags" multiple data-allow-new="true"> 

  <option selected disabled hidden value="">选择一个标签...</option> 

  <option value=" 1" selected="selected">JavaScript</option> 

  <option value="2">HTML5</option> 

  <option value="3">CSS3</option> 

  <option value="4">jQuery</ option> 

  <option value="5">React</option> 

  <option value="6">Angular</option> 

  <option value="7">Vue</option> 

  <option value="8">Python </option

</select >

5. 使用data-show-all-suggestions属性确定是否显示所有建议。

<select class="form-select" id="validationTags" multiple data-show-all-suggestions="true">

  ...

</select>

6. 启用关闭图标以清除所有部分。

<select class="form-select" id="validationTags" multiple data-allow-clear="true">

  ...

</select>


变更日志:

v1.1.2 (08/10/2021)

  • 添加允许清除

v1.1.1 (08/10/2021)

  • 鼠标不应干扰键盘导航

v1.1.0 (08/10/2021)

  • 添加显示所有建议选项

  • Ux 改进(显示带有向下箭头的列表 + 更好的选择可见性)

  • 处理长列表(带滚动条)

v1.0.3 (08/10/2021)

  • 更新

v1.0.2 (06/28/2021)

  • 更新


官方网站:https://github.com/lekoala/bootstrap5-tags

上一篇:没有了
相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库