公司最近在做一个有关tagsinput的东西，折腾了我好久，特此记录下

bootstrap-tagsinput 其实是分两步：一个是tagsinput 另一个是typeahead

1.首先先下载bootstrap-tagsinput到本地，这是它的github地址：https://github.com/bootstrap-tagsinput/bootstrap-tagsinput
目录结构如下：
Alt tagsinput
我没有全部引用这些文件，我就用到了:

  • bootstrap-tagsinput.css —这是tag的样式
  • bootstrap-tagsinput-typeahead.css —这是typeahead的样式
  • bootstrap-tagsinput.min.js

2.然后下载typeaheads.js,这是typeahead的github地址
目录结构如下：


这里只要用到typeahead-bundle.js就行了，它已经包括了其他的js库了

3.把如上文件依次引入到html之后，接下来就是写input标签了

1
2
<input type="text" id="tag_search" data-provide="typeahead" class="form-control"
  value="Amsterdam,Washington" />

4.然后是js了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//这里的cache:false 可能会有让服务器压力增大的隐患
var citynames = new Bloodhound({

	datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
	queryTokenizer: Bloodhound.tokenizers.whitespace,
	prefetch: {
	url: '{:U("index/tags")}',
	filter: function(list) {
	  return $.map(list, function(cityname) {
	    return { name: cityname }; });
	},
	cache:false
	}

});

console.log(citynames.prefetch)
$('#tag_search').tagsinput({
  typeaheadjs: {
    name: 'citynames',
    displayKey: 'name',
    valueKey: 'name',
    source: citynames.ttAdapter()
  }
});

{:U(“index/tags”)}这串url对应的是php代码如下：

1
2
3
4
5
6
7
public function tags(){

   $m = M('article_tag');
   //从数据表获取整列tag数据，默认就是数组
   $aTags = $m->getField('tagname',true);
	echo json_encode($aTags);
}

一开始我并没有加cache:false的时候，我发现就算我改了url中的json数据，还是无法及时加载。所以我就在控制台打印了citynames.prefetch,如下图：

上图是我改过cache之后的截图了，默认的是cache:true。我尝试改成了false，问题就暂时解决啦。
但是，这隐隐让我觉得当tags越来越多时，可能会对服务器造成一定压力，因为每次请求它都要去加载那串url得到json数据，不过我暂时也想不出其他方法，就只能先这样了。
等研究出别的更好的方法了我再来更新。
其实prefetch的意思应该是预加载，原来的url也是本地环境中的.json文件，所以它的本意应该是用来加载本地预定义的tag数据的。

我看网上还有如下这种实现方式：

1
2
3
4
5
6
7
$('input').tagsinput({
  typeahead: {                  
    source: function(query) {
      return $.get('{:("index/tags")}');
    }
  }
});

但是我怎么试都不行,等有时间了再研究下
Oops…能力有限，目前先这样..