bootstrap-tagsinput的使用简介

来源：互联网发布：java nio面试题编辑：程序博客网时间：2024/06/06 04:18

最近在做标签系统的时候，为了便于用户对标签的操作，如输入或是删除，用到了bootstrap-tagsinput。主要是用到了其中的Typeahead部分。
效果如下：
这里写图片描述
代码如下：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title></title>    <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>     <script src="http://cdn.bootcss.com/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>    <script src="http://cdn.bootcss.com/typeahead.js/0.11.1/typeahead.bundle.js"></script>    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">    <link href="http://cdn.bootcss.com/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet">    <style type="text/css">    .icon-github {        width: 16px;        height: 16px;    }    .bootstrap-tagsinput {        width: 100%;    }    .accordion {        margin-bottom:-3px;    }    .accordion-group {        border: none;    }    .twitter-typeahead .tt-query,    .twitter-typeahead .tt-hint {        margin-bottom: 0;    }    .twitter-typeahead .tt-hint    {        display: none;    }    .tt-menu {        position: absolute;        top: 100%;        left: 0;        z-index: 1000;        display: none;        float: left;        min-width: 160px;        padding: 5px 0;        margin: 2px 0 0;        list-style: none;        font-size: 14px;        background-color: #ffffff;        border: 1px solid #cccccc;        border: 1px solid rgba(0, 0, 0, 0.15);        border-radius: 4px;        -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);        background-clip: padding-box;        cursor: pointer;    }    .tt-suggestion {        display: block;        padding: 3px 20px;        clear: both;        font-weight: normal;        line-height: 1.428571429;        color: #333333;        white-space: nowrap;    }    .tt-suggestion:hover,    .tt-suggestion:focus {      color: #ffffff;      text-decoration: none;      outline: 0;      background-color: #428bca;    }    </style></head><body><input type="text" /><script>var cities = new Bloodhound({  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),  queryTokenizer: Bloodhound.tokenizers.whitespace,  prefetch: 'cities.json'  //标签所在文件，当然也可以从数据库中读取数据，然后生成json返回});cities.initialize();var elt = $('input');elt.tagsinput({  itemValue: 'id',  itemText: 'name',  typeaheadjs: {    name: 'cities',    displayKey: 'name',    source: cities.ttAdapter()  }});elt.tagsinput('add', { "id": 0 , "name": "Washington"});</script></body></html>

参考：https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples

Bootstrap Tags Input ：https://github.com/bootstrap-tagsinput/bootstrap-tagsinput
关于标签的插件还有很多，如
Amaze UI Tags Input ：https://github.com/amazeui/tagsinput

0 0