BootstrapTagsInput-基础避坑指南

最新推荐文章于 2025-05-30 08:51:18 发布

转载

最新推荐文章于 2025-05-30 08:51:18 发布 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/swmhxhs/blog/2979092

文章标签：

#javascript #php #前端 #ViewUI

本文介绍了BootstrapTagsInput的使用，包括基础用法、与Typeahead的结合以及遇到的坑。在Typeahead部分，文章详细阐述了typeaheadjs和Bootstrap 3 Typeahead的区别，分析了它们的示例代码和可能出现的问题，如显示值与实际值不一致、预输入下拉不显示等。通过解决这些问题，作者提供了实用的解决方案和代码示例。

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

2019独角兽企业重金招聘Python工程师标准>>>

1.简介

BootstrapTagsInput是一个基于jQuery和Bootstrap.css的用于管理标签的插件。

官网在这：官网

这个官网呢，怎么说呢，比较简洁。示例聊胜于无。

最简单的用法就是在引入jquery,和Bootstrap的前提下，在input标签中添加 data-role="tagsinput"，即可初始化。

<input type="text" value="" data-role="tagsinput" />

原因在于下方代码，代码最后一部分，写了是如何初始化的。

  /**
   * Initialize tagsinput behaviour on inputs and selects which have
   * data-role=tagsinput
   */
  $(function() {
    $("input[data-role=tagsinput], select[multiple][data-role=tagsinput]").tagsinput();
  });

还有一个通过 select标签初始化的方式。并在标签加上 multiple 属性，在通过$("select").tagsinput('items')，获取值时，返回的是一个数组，而不是逗号分隔的字符串了。

<select multiple data-role="tagsinput">
  <option value="Amsterdam">Amsterdam</option>
  <option value="Washington">Washington</option>
  <option value="Sydney">Sydney</option>
  <option value="Beijing">Beijing</option>
  <option value="Cairo">Cairo</option>
</select>

以上两个方法都会将现有value值或者option元素，自动设置为标签。

2.Typeahead&Typeahead

一般来说，如果你只使用输入，回车成为标签的功能，那你可能遇不到什么坑。

但是一旦你遇到了根据用户输入显示相关补全/提示/预输入的需求时，坑就来了。

2.1 Typeahead(预先输入)

在其文档中，有一个介绍，就是关于Typeahead的，他是这么说的：

Typeahead is not included in Bootstrap 3, so you'll have to include your own typeahead library. I'd recommed typeahead.js. An example of using this is shown below.

大意是：Bootstrap 3中已经不包含Typeahead啦，如果你想用，你必须自己引入的Typeahead库。

我们推荐了typeahead.js。下面是使用此示例的示例。巴拉巴拉。

<input type="text" value="Amsterdam,Washington" data-role="tagsinput" />
<script>
var citynames = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: {
    url: 'assets/citynames.json',
    filter: function(list) {
      return $.map(list, function(cityname) {
        return { name: cityname }; });
    }
  }
});
citynames.initialize();

$('input').tagsinput({
  typeaheadjs: {
    name: 'citynames',
    displayKey: 'name',
    valueKey: 'name',
    source: citynames.ttAdapter()
  }
});
</script>

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

然后在其文档下方有个Options介绍表，里面有一项关于typeahead的介绍，其中关于source的介绍是：