实现的效果展示：
代码如下：
1.需要引入jquery,bootstrap-suggest.js,bootstrap.min.css
2.html页面代码:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link href="__CCSS__/bootstrap.min.css" rel="stylesheet"> 5 <script type="text/javascript" src="__CJS__/jquery-1.8.3.min.js" ></script> 6 <script type="text/javascript" src="__VENDOR__/suggest/bootstrap-suggest.js" ></script> 7 </head> 8 <body> 9 <!-- 列表 --> 10 <div class="ibox-content"> 11 <h3>输入机构名称</h3> 12 <div class="input-group" style="240px;"> 13 <input type="text" class="form-control" id="searchDemoList" style="240px;margin-right:0px"> 14 <div class="input-group-btn" style="1px;"> 15 <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul> 16 </div> 17 </div> 18 </div> 19 </body> 20 <script type="text/javascript"> 21 var bsSuggest = $("#searchDemoList").bsSuggest({ 22 indexId: 4, //每组数据的第几个数据，作为input输入框的 data-id，设为 -1 且 idField 为空则不设置此值 23 indexKey: 0, //data.value 的第几个数据，作为input输入框的内容 24 allowNoKeyword: false, //是否允许无关键字时请求数据 25 multiWord: false, //以分隔符号分割的多关键字支持 26 separator: ",", //多关键字支持时的分隔符，默认为空格 27 getDataMethod: "url", //获取数据的方式，总是从 URL 获取 28 effectiveFields:["orgName","code"], 29 effectiveFieldsAlias:{orgName:"机构名称",code:"编码"}, 30 showHeader: true, 31 url: 'index.php?s=/Admin/User/getAllOrg&departName=', /*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/ 32 processData:function(json){ 33 // url 获取数据时，对数据的处理，作为 getData 的回调函数 34 var i, len, data = {value: []}; 35 if(!json || json.length == 0) { 36 return false; 37 } 38 len = json.length; 39 for (i = 0; i < len; i++) { 40 data.value.push({ 41 "orgName":json[i].org_name, 42 "code":json[i].org_code 43 }); 44 } 45 return data; 46 } 47 }); 48 </script> 49 </html>
3.后台就可以通过传的参数筛选了
哦了 就是这么方便 这么简单