jquery autocomplete 插件的使用

舒博雅
2023-12-01

功能分析:
后端传来一个数组,有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>
 类似资料: