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.后台就可以通过传的参数筛选了
哦了 就是这么方便 这么简单
天再高,踮起脚尖就能更接近阳光
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 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,谁才是开发者新宠?