记一个好用的下拉插件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,channelCodeeffectiveFields:['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");});

看下效果

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

哦了，结束！