tagsinput和typeahead生成标签

bootstrap-tagsinput是一款插件，用于页面tag标签生成。

它支持自己手动输入，同时也能在ajax基础上智能填充输入框内容。

一般的功能，官网上有介绍。不过对于自动填充这块，需要详细说明一下。

---

效果图

require

bootstrap-tagsinput-angular.js

bootstrap-tagsinput.js

bootstrap-tagsinput.css

bootstrap3-typeahead.min.js（注意，这里需要的这个typeahead和官网上的有所区别。官网的存在问题！）

html

<div class="col-md-8 col-md-offset-2">        <input id="tags" type="text" class="form-control" placeholder="请输入标签" data-role="tagsinput"/></div><script th:inline="javascript">    $('#tags').tagsinput({        maxTags: 5,        //表示ajax接收后数据对应格式        itemValue: 'id',        itemText: 'name',        typeahead: {            displayKey: 'name',            source: function(query) {                return $.get('/tag/list', {query: query});            },            //清除input上多出来的一条无效数据             afterSelect: function() {                this.$element[0].value = '';            }        },        freeInput: true    });</script>

java

这里用的是springboot

@Controller@RequestMapping("/tag")public class TagController {    @RequestMapping(value = "/list", method = RequestMethod.GET)    public @ResponseBody List<Tag> getTagsList(@RequestParam String query) {        return new TagServiceImpl().getTagsByName(query);    }}

数据格式

返回的格式如下，前台只用到了id和name。

也可以这么返回：[‘java’, ‘php’, ‘c++’]。只要封装成一个List即可。

[  {    "id": "001",    "createdId": null,    "createdName": null,    "createdTime": null,    "name": "java"  },  {    "id": "002",    "createdId": null,    "createdName": null,    "createdTime": null,    "name": "php"  },  {    "id": "003",    "createdId": null,    "createdName": null,    "createdTime": null,    "name": "c++"  }]