功能分析:
后端传来一个数组,有title字段和id字段;
前端接收数组处理,然后将一个input区域加载autocomplete插件,随着input域的值输入,选择出相应的内容。
var auto_complete_data = <?= $auto_complete_data ?>;
//获取后端数组
$.each(auto_complete_data, function(i){
list[i] = auto_complete_data[i].title + "(" + auto_complete_data[i].id + ")";
});
//将数组拼接成 这是个知识点(110) 的样子
$('#know_node').autocomplete({
minLength: 1, //所需要输入的最短长度
autofocus: true,
source: list, //使用刚刚拼接的数据
scroll: true, //可以滚动
scrollHeight: 300, //下拉框高度
focus: function (event, ui) {
return false;
}
});
//html 部分
<div class="col-sm-4" >
<input type="text" class="form-control" id = "know_node" placeholder="搜索知识点" >
</div>