【前端】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