tagsinput和typeahead生成标签

最新推荐文章于 2025-06-30 09:01:38 发布

原创最新推荐文章于 2025-06-30 09:01:38 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#tag #标签 #插件

本文介绍如何使用Bootstrap Tagsinput插件结合Ajax实现标签自动填充功能。通过具体示例代码展示了前端设置及后端SpringBoot控制器的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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