suggest插件实现下拉选择筛选
实现的效果展示:
代码如下:
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插件实现下拉选择筛选的更多相关文章
- [原] XAF 添加日期筛选下拉选择
1.ListView 添加日期筛选下拉选择,选择指定,可指定日期范围 2.Code using DevExpress.Data.Filtering; using DevExpress.ExpressA ...
- FancySelect – 更好用的 jQuery 下拉选择框插件
FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...
- jQuery插件——下拉选择框
其实,之前也写过jQuery插件,今天写的是一个模拟select选择的下拉插件. 既然是jQuery插件,那么必然是依赖jQuery的了. 老规矩,直接上代码吧! ;(function () { $. ...
- jquery.chosen.js下拉选择框美化插件项目实例
由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...
- CSS自定义select下拉选择框(不用其他标签模拟)
今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...
- selenium 难定位元素,时间插件,下拉框定位,string
1.元素定位 ID定位元素: findElement(By.id(“”)); 通过元素的名称定位元素: findElement(By.name(“”)); 通过元素的html中的位置定位元素: fin ...
- CSS3不一样的下拉选择框
本例中包含两个下拉选择框的动画示例,本例中并未使用select标签.本例中第一个案例也可用于标题.导航栏等位置. 案例一: html布局 <div class="content&quo ...
- combobox级联检索下拉选择框
1.效果图 2.前端 @{ ViewBag.Title = "Index"; Layout = null; @*自动筛选下拉框*@ <script src="~/S ...
- select2 智能补全模糊查询select2的下拉选择框使用
我们在上篇文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架,在此基础上记录select2的使用. 应用bootstrap模板 基础项目源码下载地址为: SpringMV ...
随机推荐
- 打印出所有的 "水仙花数 ",所谓 "水仙花数 "是指一个三位数,其各位数字立方和等于该数本身。例如:153是一个 "水仙花数 ",因为153=1的三次方+5的三次方+3的三次方。
---恢复内容开始--- ---恢复内容结束---
- W3School-CSS 文本实例
CSS 文本实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距 (paddi ...
- For循环案例---九九乘法表
概述:先创建一个Print99类,类中创建5个方法,分别为Test9901.Test9902.Test9903.Test9904.Test9905,分别打印出不同形状的九九乘法表,该类创建完成后再创建 ...
- csu 1812: 三角形和矩形 凸包
传送门:csu 1812: 三角形和矩形 思路:首先,求出三角形的在矩形区域的顶点,矩形在三角形区域的顶点.然后求出所有的交点.这些点构成一个凸包,求凸包面积就OK了. /************** ...
- CF722C. Destroying Array[并查集 离线]
链接:Destroying Array C. Destroying Array time limit per test 1 second memory limit per test 256 megab ...
- Codeforces 500B. New Year Permutation[连通性]
B. New Year Permutation time limit per test 2 seconds memory limit per test 256 megabytes input stan ...
- codevs 1002 搭桥
codevs 第一道题 先贴描述 1002 搭桥 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description ...
- [转]Asp.net mvc 网站之速度优化 -- 页面缓存
网站速度优化的一般方法 由于网站最重要的用户体验就是速度,特别是对于电子商务网站而言. 一般网站速度优化会涉及到几个方面: 1. 数据库优化 — 查询字段简历索引,使用数据库连接池和持久化,现在还有种 ...
- [No000052]大蒜怎么吃最美容?吃大蒜的功效及禁忌
大蒜是最常见的香辛调味料,它被称为天然抗生素,富含大蒜素等多种营养物质和抗氧化剂,具有多种美肤美容作用. 大蒜的5种美容功效 1.除皱.大蒜里的某些成分,有类似维生素E与维生素C的抗氧化.防衰老特性, ...
- AlertDialog禁止返回键
android 如何让dialog不消失,即使是用户按了返回键dialog也不消失 解决的问题:软件提示升级的dialog时候,用户有可能按了返回键,但是现在的需求是用户只能按"确定升级&q ...