實現的效果展示：
代碼如下：
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="width:240px;"> 13 <input type="text" class="form-control" id="searchDemoList" style="width:240px;margin-right:0px"> 14 <div class="input-group-btn" style="width: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.后台就可以通過傳的參數篩選了
哦了 就是這么方便 這么簡單