最终效果图（注意用火狐浏览器打开，原因看第4点）： 
1.下载插件分发包
这里下载，到页面后点击Download This Plugin
2.引入css和js
这个插件支持bootstrap2和bootstrap3。
我选择的是bootstrap3版本。
参考的是demo里的“Categorizing tags”，因为这个看起来漂亮一些，而且有自动补全功能。
<link rel="stylesheet" href="../lib/bootstrap-3/bootstrap.min.css">
<link rel="stylesheet" href="../lib/bootstrap-3/bootstrap-theme.min.css">
<link rel="stylesheet" href="../dist/bootstrap-tagsinput.css">
<link rel="stylesheet" href="assets/app.css">
<script src="../lib/jquery/jquery.min.js"></script>
<script src="../lib/bootstrap-3/bootstrap.min.js"></script>
<script src="../lib/typeahead.js/typeahead.bundle.min.js"></script>
<script src="../dist/bootstrap-tagsinput.min.js"></script>demo里自动补全用的是typehead，这里的app.css是需要的，不然自动补全时样式会乱。
我有代码洁癖，这里的css和js绝对都是最精简的。
3.开始使用
<body>
<input type="text" />
<script>
var cities = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: 'assets/cities.json'
});
cities.initialize();
var elt = $('input');
elt.tagsinput({
tagClass: function(item) {
switch (item.continent) {
case 'Europe' : return 'label label-primary';
case 'America' : return 'label label-danger label-important';
case 'Australia': return 'label label-success';
case 'Africa' : return 'label label-default';
//case 'Asia' : return 'label label-warning';
case 'Asia' : return 'label label-info';
}
},
itemValue: 'value',
itemText: 'text',
typeaheadjs: {
name: 'cities',
displayKey: 'text',
source: cities.ttAdapter()
}
});
elt.tagsinput('add', { "value": 1 , "text": "Amsterdam" , "continent": "Europe" });
elt.tagsinput('add', { "value": 4 , "text": "Washington" , "continent": "America" });
elt.tagsinput('add', { "value": 7 , "text": "Sydney" , "continent": "Australia" });
elt.tagsinput('add', { "value": 10, "text": "Beijing" , "continent": "Asia" });
elt.tagsinput('add', { "value": 13, "text": "Cairo" , "continent": "Africa" });
elt.tagsinput('add', { "value": 9, "text": "Canberra" , "continent": "Australia" });
</script>
</body>4.注意事项
注意这里有一个prefetch: ‘assets/cities.json’。我在chrome下测试不行，在firefox48下可以。这个是浏览器同源策略限制的，火狐下竟然没有限制这个，不知道是喜是忧。
5.自动补全动态查询
前面自动补全用的是本地的词库cities.json。下面用另一种，输入时向后台查询。
<body>
<input type="text" />
<script>
var elt = $('input');
elt.tagsinput({
tagClass: function(item) {
switch (item.continent) {
case 'Europe' : return 'label label-primary';
case 'America' : return 'label label-danger label-important';
case 'Australia': return 'label label-success';
case 'Africa' : return 'label label-default';
case 'Asia' : return 'label label-info';
}
},
itemValue: 'value',
itemText: 'text',
typeaheadjs: {
name: 'cities',
displayKey: 'text',
source: function(query, syncResults, asyncResults) {
$.get('${basePath}user/loadHints?query=' + query, function(data) {
asyncResults(data.results);
});
}
}
});
elt.tagsinput('add', { "value": 1 , "text": "Amsterdam" , "continent": "Europe" });
elt.tagsinput('add', { "value": 4 , "text": "Washington" , "continent": "America" });
elt.tagsinput('add', { "value": 7 , "text": "Sydney" , "continent": "Australia" });
elt.tagsinput('add', { "value": 10, "text": "Beijing" , "continent": "Asia" });
elt.tagsinput('add', { "value": 13, "text": "Cairo" , "continent": "Africa" });
elt.tagsinput('add', { "value": 9, "text": "Canberra" , "continent": "Australia" });
</script>
</body>如果你后台返回的json字符串跟cities.json里的格式不一样。可以在asyncResults之前处理一下。
网上有很多用filter(v0.10版本)和transform(v0.11.1版本)的。我都试了不管用。就上述写法最好使。
参考Aqabawe的回答
如果你后台返回的数据格式是这样的：
{
"results":[
{
"continent":"Europe",
"text":"Amsterdam",
"value":1
},
{
"continent":"Asia",
"text":"Shanghai",
"value":111
}
]
}
