JS插件之——bootstrap-suggest.js

今天遇到了一个很牛逼的插件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="240px;">                                                
12     <input type="text" class="form-control" id="admdirector" style="240px;margin-right:0px">                                            
13     <div class="input-group-btn" style="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的后面

展示的效果如下：