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++" } ]