suggest插件实现下拉选择筛选

实现的效果展示：

代码如下：

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.后台就可以通过传的参数筛选了

哦了  就是这么方便 这么简单

 

posted @   dreamfly_cc  阅读(3010)  评论(1)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
点击右上角即可分享
微信分享提示