【前端】typeahead + tagsinput 实现标签自动补全

项目需求：
添加技能标签，并且实现标签自动补全

技术选型：

1. 标签管理tagsinput 官方demo
2. 自动补全typeahead 官方demo

加载相关js和css文件

 	<!--引入js和bootstrap-->
    <script th:src="@{/js/jquery.min.js}"></script>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <script th:src="@{/js/bootstrap.min.js}"></script>

    <!--引入typeahead-->
    <script th:src="@{/ajax/libs/typeahead/bootstrap3-typeahead.min.js}"></script>
    <!--引入tagsinput-->
    <script th:src="@{/ajax/libs/tagsinput/bootstrap-tagsinput.min.js}"></script>
    <link th:href="@{/ajax/libs/tagsinput/bootstrap-tagsinput.css}" rel="stylesheet"/>

页面展示

<div class="row">
    <div class="form-group">
        <label class="col-sm-2 control-label">方案标签：</label>
        <div class="col-sm-8">
            <input id="solutionTag" name="solutionTag" type="text" placeholder="标签..."
                   data-role="tagsinput" class="form-control"/>
        </div>
    </div>
</div>
<br>
<div class="row">
    <div class="form-group">
        <label class="col-sm-2 control-label">tagsinput案例：</label>
        <div class="col-sm-8">
            <input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput"
        </div>
    </div>
</div>

js操作

<script type="text/javascript">
    var tagSource = ['java', 'javaScript', 'c++'];
    $('#solutionTag').tagsinput({
        maxTags: 5,
        typeahead: {
            source: tagSource,
            afterSelect: function () {
                this.$element[0].value = '';
            }
        },
        freeInput: true
    });
</script>

调取后端接口

<script type="text/javascript">
    $('#solutionTag').tagsinput({
        maxTags: 5,
        typeahead: {
            //设置访问连接，返回一个数组即可
            source: function () {
                return $.get("/tagDemo");
            },
            afterSelect: function () {
                this.$element[0].value = '';
            }
        },
        freeInput: true
    });
</script>

controller层

@Controller
public class TagController {


    @RequestMapping("/tag")
    public String tag() {
        return "tag/tag";
    }

    /**
     * 获取数据集合，返回数组即可
     */
    @GetMapping("/tagDemo")
    @ResponseBody
    public String[] tagDemo() {
        return new String[]{"java", "javascript", "c++"};
    }
}

运行springboot：http://localhost:8080/tag

效果图：


源码地址：https://gitee.com/xumiaofeng/tag.git

springboot启动运行后，直接在浏览器中输入：http://localhost:8080/tag