记一个好用的下拉插件bootstrap-suggest-js

准备工作

bootstrap.min.css
jquery.min.js
bootstrap.min.js
bootstrap-suggest.js

开工

搞一个修改页面的demo，顺便把回显也整了。

插件初始化

    //企业搜索----通道
    $("#tb").bsSuggest({
        url: '后端接口路径（注意接口请求要求必须GET方式！）' ,
        idField:'id',//每组数据的哪个字段作为 data-id，优先级高于 indexId 设置（推荐）
        keyField:'name',//每组数据的哪个字段作为输入框内容，优先级高于 indexKey 设置（推荐）
        //这里注意，这里是用户页面，要取通道表的'id','name','code'，而不是用户表的channelId,channelName,channelCode
        effectiveFields:['id','name','code'],//有效显示于列表中的字段，非有效字段都会过滤，默认全部有效
        allowNoKeyword: true, //是否允许无关键字时请求数据
        multiWord: true, //以分隔符号分割的多关键字支持
        separator: ",", //多关键字支持时的分隔符，默认为空格
        autoSelect:true,//键盘向上/下方向键时，是否自动选择值
        getDataMethod: "firstByUrl", //获取数据的方式，url：一直从url请求；data：从 options.data 获取；firstByUrl：第一次从Url获取全部数据，之后从options.data获取
        hideOnSelect:true,//鼠标从列表单击选择了值时，是否隐藏选择列表
        /*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
        processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
            var i, len, data = {
                value: []
            };
            if (!json || !json.rows || json.rows.length === 0) {
                return false;
            }

            console.log(json);
            len = json.rows.length;

            jsonStr = "{'value':[";
            for (i = 0; i < len; i++) {
                data.value.push(json.rows[i]);
            }

            //字符串转化为 js 对象
            return data;
        }
    }).on('onDataRequestSuccess', function (e, result) {
        $("#tb").val($("#channelName").val());//input框要显示的内容
        console.log('onDataRequestSuccess: ', result);
    }).on('onSetSelectValue', function (e, keyword, data) {
        $("#channelId").val(keyword.id);//数据回显
        $("#channelName").val(keyword.key);//数据回显
        $("#channelCode").val(data.code);//数据回显
        console.log('onSetSelectValue: ', keyword, data);
    }).on('onUnsetSelectValue', function (e) {
        console.log("onUnsetSelectValue");
    });

看下效果

所有数据：
模糊筛选数据：

哦了，结束！