bootstrap-tagsinput的使用简介

最新推荐文章于 2025-06-30 09:01:38 发布

原创最新推荐文章于 2025-06-30 09:01:38 发布 · 2w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#标签 #tagsinput #bootstrap

html 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个基于Bootstrap的标签输入插件——bootstrap-tagsinput，并演示了如何结合Typeahead实现标签建议功能，通过具体代码示例展示了如何初始化插件并加载预设标签。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做标签系统的时候，为了便于用户对标签的操作，如输入或是删除，用到了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>