项目需求:
添加技能标签,并且实现标签自动补全
技术选型:
加载相关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