今天遇到了一個很牛逼的插件bootstrap-suggest.js 如此好用的搜索提示插件 簡直酷斃了
編寫了一個例子，供以后參考
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html > 3 <head> 4 <title>1.html</title> 5 6 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 7 <link rel="stylesheet" href="../../js/bootstrap.min.css" /> 8 </head> 9 <body > 10 <h3>下拉框示例</h3> 11 <div class="input-group" style="width:240px;"> 12 <input type="text" class="form-control" id="admdirector" style="width:240px;margin-right:0px"> 13 <div class="input-group-btn" style="width:1px;"> 14 <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul> 15 </div> 16 </div> 17 <script src="../../js/jquery.min.js"></script> 18 <script src="../../js/bootstrap.min.js"></script> 19 <script src="../../js/bootstrap-suggest.js"></script> 20 <script> 21 var admdirector = $("#admdirector").bsSuggest({ 22 indexId: 4, //data.value 的第幾個數據，作為input輸入框的內容 23 indexKey: 0, //data.value 的第幾個數據，作為input輸入框的內容 24 allowNoKeyword: false, //是否允許無關鍵字時請求數據 25 multiWord: false, //以分隔符號分割的多關鍵字支持 26 separator: ",", //多關鍵字支持時的分隔符，默認為空格 27 getDataMethod: "url", //獲取數據的方式，總是從 URL 獲取 28 effectiveFields:["name","ename","departName","jobtitle"], 29 effectiveFieldsAlias:{name: "姓名",ename:"英文名",departName:"部門",jobtitle:"職位"}, 30 showHeader: true, 31 url: '/omss/viewEmpByName?name=', /*優先從url ajax 請求 json 幫助數據，注意最后一個參數為關鍵字請求參數*/ 32 processData: function(json){// url 獲取數據時，對數據的處理，作為 getData 的回調函數 33 var i, len, data = {value: []}; 34 if(!json || json.length == 0) { 35 return false; 36 } 37 len = json.length; 38 for (i = 0; i < len; i++) { 39 data.value.push({ 40 "name": json[i].name, 41 "ename": json[i].ename, 42 "departName":json[i].dep_name, 43 "jobtitle":json[i].jobtitle, 44 "eid":json[i].eid 45 }); 46 } 47 console.log(data); 48 return data; 49 } 50 }); 51 </script> 52 </body> 53 54 </html>
注意：
【1】包含了一個css文件、三個js文件、和一段插件初始化代碼
<link rel="stylesheet" href="../../js/bootstrap.min.css" />
<script src="../../js/jquery.min.js"></script> <script src="../../js/bootstrap.min.js"></script> <script src="../../js/bootstrap-suggest.js"></script>
【2】JS文件一定要跟在div的后面
展示的效果如下：
