EasyUI combobox下拉列表实现搜索过滤(模糊匹配)
实现搜索功能:
项目中的某个下拉列表长达200多个项,这么巨大的数量一个一个找眼镜都得看花,于是就得整了个搜索功能。看网上别人帖子有只能前缀匹配的方案,但只能前缀匹配的话用起来也不是很方便。于是就记录一下模糊匹配的方案。
实现效果:
这里使用的是combobox组合框,对于combobox的创建可以使用<input>输入框,也可以使用<select>下拉选。我使用的是<select>:
HTML代码
<label>关联课程</label>
<select class="easyui-combobox" name="itemsId" id="itemsId" style="width:135px;height:25px;">
<option>请选择关联课程</option>
</select>
然后通过js从远程获取数据并实现搜索功能:
$("#itemsId").combobox({
url: "xxxxxx",
editable: true,
valueField: 'id',
textField: 'name',
panelWidth: 220, // 下拉框宽度
panelHeight: 250, // 下拉框高度
filter: function(q, row){
var opts = $(this).combobox('options');
return row[opts.textField].indexOf(q) > -1;
}
});
因为需要输入查询,所以下拉项必须得可编辑。使用combobox创建下拉项默认是可以编辑的,设置 editable: true 虽然感觉很鸡肋,但看起来功能更清晰。
filter:定义函数如何过滤数据,return row[opts.textField].indexOf(q) == 0时只能前缀匹配, return row[opts.textField].indexOf(q) > -1 就是模糊匹配了。
这样模糊匹配的功能就实现了。随便记录一下默认显示值的问题。
设置显示默认值:
实现placeholder效果
使用combobox组合框时,会生成 class=“combo-text validatebox-text” 的文本框,所以通过id和类选择器选择目标input设置placeholder属性即可。
通过id定位时,不能使用combobox的id,得使用父级元素的id定位
<div id="subCourse_dlg" style="width: 300px; height: 160px;" closed="true">
<div style="margin: 10px 10px;">
<select class="easyui-combobox" name="subCourse" id="subCourse" style="width: 220px;">
</select>
</div>
</div>
$("#subCourse_dlg .combo-text").attr("placeholder","选择或输入名称查询...");
显示默认值
在修改数据时默认得显示设置的值,也就是加载的选择项selected=true,一开始我是想使用formatter函数将获取的列表数据选中的项添加selected属性为true,但这种方式会导致下拉列表显示为空白
所以这种方式是不可行的,于是就寻求了其他方式,发现了解决方案:
通过combobox的select方法:
只需添加下面这行代码就行,在combobox创建前后都可以。
$("#itemsId").combobox("select", rows.name)
这是通过combobox的select方法选择指定的选项,“rows.name”可以是option的value,也可以text。
当然也可以在combobox的onLoadSuccess事件,从远程数据加载成功时处理(这种方式就太累赘了,只是为了记录一下onLoadSuccess的使用):
$("#itemsId").combobox({
url: 'xxxx',
editable: true,
valueField: 'id',
textField: 'kcName',
panelWidth: 220,
panelHeight: 250,
filter: function(q, row){
var opts = $(this).combobox('options');
return row[opts.textField].indexOf(q) > -1;
},
onLoadSuccess: function(data) {
for(var i = 0; i < data.length; i++) {
if(data[i].id == rows.itemsId) {
$("#itemsId").combobox("select", data[i].id)
}
}
}
});
EasyUI combobox下拉列表实现搜索过滤(模糊匹配)的更多相关文章
- 【搜索引擎】 PostgreSQL 10 实时全文检索和分词、相似搜索、模糊匹配实现类似Google搜索自动提示
需求分析 要通过PostgreSQL实现类似Google搜索自动提示的功能,例如要实现一个查询海量数据中的商品名字,每次输入就提示用户各种相关搜索选项,例如淘宝.京东等电商查询 思路 这个功能可以用 ...
- NSPredicate 谓词总结 数组过滤 模糊匹配
NSPredicate 用于指定过滤条件,主要用于从集合中分拣出符合条件的对象,也可以用于字符串的正则匹配. NSPredicate常用方法介绍 1.创建NSPredicate(相当于创建一个过滤条件 ...
- 项目实战:Qt文件改名工具 v1.2.0(支持递归检索,搜索:模糊匹配,前缀匹配,后缀匹配;重命名:模糊替换,前缀追加,后缀追加)
需求 在整理文件和一些其他头文件的时候,需要对其名称进行整理和修改,此工具很早就应该写了,创业后,非常忙,今天抽空写了一个顺便提供给学习. 工具和源码下载地址 本篇文章的应用包和源码包可在 ...
- easyui combobox 智能提示搜索
<!-- 获取机会点名称列表 --><script> function initOpportunityNameFuzzyQuery() { $('#jihuidianmingc ...
- jquery easyui combobox 从指定位置开始模糊查询
$("#bzr").combobox({ url: "ClassSave.aspx?opt=bzr&bzr=<%=arrbj[2]%>", ...
- easyui combobox下拉列表的多选值
html: <input id="cc" class="easyui-combobox" value="" data-options= ...
- thinkphp实现模糊匹配(学习贵哥代码)
模板文件: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- EasyUi模糊匹配搜索框combobox
现在项目当中很多已经应用了Jquery-easyUi这个界面框架了,所以,学习一点easyUI的常用工具就显得很重要了,现在介绍的就是我在项目中用到的easyUi的模糊匹配组合框combobox. c ...
- easyUI combobox combotree 模糊查询,带上下键选择功能,待完善。。。。
/2017年4月9日 11:52:36 /** * combobox和combotree模糊查询 * combotree 结果带两级父节点(手动设置数量) * 键盘上下键选择叶子节点 * 键盘回车键设 ...
随机推荐
- 使用回调的方式实现中间件-laravel
$app = function ($request) { echo $request . "\n"; return "项目运行中....."; }; // 现在 ...
- redis 是如何做持久化的
Redis 是一个键值对数据库服务器.基于内存存储数据,它常被用做缓存数据库,用来替代 memcached.官网:https://redis.io/ 什么是持久化? 持久化,指将数据存储到可永久保存的 ...
- iOS中 分类(category)与扩展(Extension)的区别?
1.分类(category)的作用 (1).作用:可以在不修改原来类的基础上,为一个类扩展方法.(2).最主要的用法:给系统自带的类扩展方法. 2.分类中能写点啥? (1).分类中只能添加“方法”,不 ...
- TCP/IP协议与OSI体系结构总结
什么是TCP/IP协议?TCP/IP协议不是一个简单的TCP和IP协议,而是个协议族的统称,是网络通信的一套协议集合. TCP/IP协议与OSI七层模型在模块分布上具有一定的区别,OSI参考模型通信协 ...
- 分享常见的HTTP状态码
本内容摘抄自RUNOOB.COM 当浏览一个网页时,浏览器会向网页所在服务器发出请求.当浏览器确定接收并显示网页之前,此网页所在的服务器会返回一个含有HTTP状态码(HTTP Status Code) ...
- JS高级程序设计第3章--精简版
前言:纯手打!!!按照自己思路重写!!!这次是二刷了,想暑假做一次完整的笔记,但用本子来写笔记的话太贵了,可能哪天还丢了..所以还是博客好== 第三章:基本概念(语法.数据类型.流控制语句.函数) 3 ...
- 【linux杂谈】在SSH连接中,openssh如何解决'Connection refused'错误?
openssh是SSH (Secure SHell) 协议的免费开源实现.SSH协议族可以用来进行远程控制, 或在计算机之间传送文件. 这就意味着远程登陆,文件推拉特别是搭建集群后公钥的部署,经常要利 ...
- 关于过两级mux的时序约束的添加(一个非常经典的时序约束问题)
非常开心自己的微信公众号: <数字集成电路设计及EDA教程> 关注者超过了1700 里面主要讲解数字IC前端.后端.DFT.低功耗设计以及验证等相关知识,并且讲解了其中用到的各种EDA工具 ...
- 嵊州D3T3 light
嵊州D3T3 light 光恰似水 兄弟俩曾经 k 次受到过父母的物质激励. 一开始,兄弟俩的能力值为 1,最后,兄弟俩的能力值是 1 + (2 ^k−1)/ n . 当兄弟俩受到价值为 mi 的物质 ...
- 多线程总结-同步之volatile关键字
目录 1 案例引出可见性 2 案例引出原子性 1 案例引出可见性 代码解析:新起一个子线程执行m()方法,1秒后主线程将b置为false,子线程是否会停止执行死循环while(b){},打印" ...