BootstrapTagsInput-基础避坑指南

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的介绍是：

An array (or function returning a promise or array), which will be used as source for a typeahead.

大意是：一个数组（或返回一个承诺或数组的函数）,它将用typeahead的数据源。

2.2 眼睛瞪得像铜铃 射出闪电般的精明

说实话，tagsinput 这文档给我一种什么感觉呢？

就是=>饶你奸似鬼!照样喝老娘的洗脚水！

上面说了，他给了一个推荐的Typeahead示列，然后下方的option表中有其对应的描述。

如果你只是直接复制示例代码，直接运行ÿ