bootstrap-tagsinput是一款插件,用于页面tag标签生成。
它支持自己手动输入,同时也能在ajax基础上智能填充输入框内容。
一般的功能,官网上有介绍。不过对于自动填充这块,需要详细说明一下。
bootstrap-tagsinput-angular.js
bootstrap-tagsinput.js
bootstrap-tagsinput.css
bootstrap3-typeahead.min.js(注意,这里需要的这个typeahead和官网上的有所区别。官网的存在问题!)
<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>
这里用的是springboot
@Controller
@RequestMapping("/tag")
public class TagController {
@RequestMapping(value = "/list", method = RequestMethod.GET)
public @ResponseBody List 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++"
}
]