实现的效果展示：

代码如下：

1.需要引入jquery,bootstrap-suggest.js,bootstrap.min.css

2.html页面代码:

 <!DOCTYPE html>

 <html>

 <head>

     <link href="__CCSS__/bootstrap.min.css" rel="stylesheet">

     <script type="text/javascript" src="__CJS__/jquery-1.8.3.min.js" ></script>

     <script type="text/javascript" src="__VENDOR__/suggest/bootstrap-suggest.js" ></script>

 </head>

 <body>

     <!-- 列表 -->

     <div class="ibox-content">

         <h3>输入机构名称</h3>

          <div class="input-group" style="width:240px;">

              <input type="text" class="form-control" id="searchDemoList" style="width:240px;margin-right:0px">

              <div class="input-group-btn" style="width:1px;">

             <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>

              </div>

          </div>

     </div>

 </body>

 <script type="text/javascript">

      var bsSuggest = $("#searchDemoList").bsSuggest({

         indexId: 4, //每组数据的第几个数据，作为input输入框的 data-id，设为 -1 且 idField 为空则不设置此值

         indexKey: 0, //data.value 的第几个数据，作为input输入框的内容

         allowNoKeyword: false, //是否允许无关键字时请求数据

         multiWord: false, //以分隔符号分割的多关键字支持

         separator: ",", //多关键字支持时的分隔符，默认为空格

         getDataMethod: "url", //获取数据的方式，总是从 URL 获取

         effectiveFields:["orgName","code"],

         effectiveFieldsAlias:{orgName:"机构名称",code:"编码"},

         showHeader: true,

         url: 'index.php?s=/Admin/User/getAllOrg&departName=', /*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/

         processData:function(json){

         // url 获取数据时，对数据的处理，作为 getData 的回调函数

             var i, len, data = {value: []};

             if(!json || json.length == 0) {

                 return false;

             }

             len = json.length;

             for (i = 0; i < len; i++) {

                 data.value.push({

                     "orgName":json[i].org_name,

                     "code":json[i].org_code

                 });

             }

             return data;

         }

     });

 </script>

 </html>

3.后台就可以通过传的参数筛选了

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

suggest插件实现下拉选择筛选的更多相关文章

  1. [原] XAF 添加日期筛选下拉选择

    1.ListView 添加日期筛选下拉选择,选择指定,可指定日期范围 2.Code using DevExpress.Data.Filtering; using DevExpress.ExpressA ...

  2. FancySelect – 更好用的 jQuery 下拉选择框插件

    FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...

  3. jQuery插件——下拉选择框

    其实,之前也写过jQuery插件,今天写的是一个模拟select选择的下拉插件. 既然是jQuery插件,那么必然是依赖jQuery的了. 老规矩,直接上代码吧! ;(function () { $. ...

  4. jquery.chosen.js下拉选择框美化插件项目实例

    由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...

  5. CSS自定义select下拉选择框(不用其他标签模拟)

    今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...

  6. selenium 难定位元素，时间插件，下拉框定位，string

    1.元素定位 ID定位元素: findElement(By.id(“”)); 通过元素的名称定位元素: findElement(By.name(“”)); 通过元素的html中的位置定位元素: fin ...

  7. CSS3不一样的下拉选择框

    本例中包含两个下拉选择框的动画示例,本例中并未使用select标签.本例中第一个案例也可用于标题.导航栏等位置. 案例一: html布局 <div class="content&quo ...

  8. combobox级联检索下拉选择框

    1.效果图 2.前端 @{ ViewBag.Title = "Index"; Layout = null; @*自动筛选下拉框*@ <script src="~/S ...

  9. select2 智能补全模糊查询select2的下拉选择框使用

    我们在上篇文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架,在此基础上记录select2的使用. 应用bootstrap模板 基础项目源码下载地址为: SpringMV ...

随机推荐

  1. 烂泥：yum的使用及配置

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 最近由于服务器需求,需要在公司内网搭建内网yum源. 搭建内网yum源需要分以下几个步骤,如下: 1. yum是什么 2. repo文件是什么 3. r ...

  2. Swift实现截屏并保存相册

    func saveToLocal() { //截屏 let screenRect = UIScreen.mainScreen().bounds UIGraphicsBeginImageContext( ...

  3. iOS获取本地沙盒视频封面图片

    最近做了个小应用,有涉及到本地视频播放及列表显示. 其中一个知识点就是获取本地存储视频,用来界面中的封面显示. 记录如下: -(UIImage*) thumbnailImageForVideo:(NS ...

  4. Linux基础命令之cat使用方法大全

    今天在学习部署安装openstack的时候,看到一个关于cat的奇怪用法,可能是本人的才疏学浅没见过这种写法,于是乎查阅资料了一番,并进行了总结,希望也能够帮助有需要的朋友. 以下是我总结的几种常用方 ...

  5. Linux下的压缩zip,解压缩unzip命令详解及实例

    实例:压缩服务器上当前目录的内容为xxx.zip文件 zip -r xxx.zip ./* 解压zip文件到当前目录 unzip filename.zip ====================== ...

  6. java enum(枚举）的使用

    在实际编程中,往往存在着这样的“数据集”,它们的数值在程序中是稳定的,而且“数据集”中的元素是有限的. 例如星期一到星期日七个数据元素组成了一周的“数据集”,春夏秋冬四个数据元素组成了四季的“数据集” ...

  7. Python 变量类型

    Python 变量类型 变量存储在内存中的值.这就意味着在创建变量时会在内存中开辟一个空间. 基于变量的数据类型,解释器会分配指定内存,并决定什么数据可以被存储在内存中. 因此,变量可以指定不同的数据 ...

  8. Linux软件安装-yum安装

    虽然RPM包安装软件很方便.快捷,但是还是需要现有安装包才能安装.为了更为方便的安装软件,发展出了利用网络自动安装的方式--yum安装. 使用yum安装的前提是机器可以上网. 1.配置yum源 在/e ...

  9. 扫描线+堆 codevs 2995 楼房

    2995 楼房  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description 地平线(x轴)上有n个矩(lou)形(fan ...

  10. 北理工c语言单项选择题

    1.在函数中,只要说明了变量,就可为其分配存储单元 error:如auto和register类型的变量在定义它的函数被调用时才被分配存储单元 auto:默认的局部变量存储方式,(这种变量定义时在动态存 ...