EasyUi模糊匹配搜索框combobox

现在项目当中很多已经应用了Jquery-easyUi这个界面框架了，所以，学习一点easyUI的常用工具就显得很重要了，现在介绍的就是我在项目中用到的easyUi的模糊匹配组合框combobox.

combobox这个工具可以在用户输入一点前面的数据就会快速的查询出符合当前查询数据的所有数据。

这个工具只要在引入easyUI jar包的Jsp页面中引用就可以了。

用法：

1、需要引入class=" easyui-combobox”

2、参数设置需要在data-options中设置

3、属性参数配置：

valueField：基础数据值名称绑定到Combobox(提交值)

textField：基础数据的字段名称绑定的Combobox（显示值）

mode:定义当文本改变时如何加载列表数据，当设置为remote模式下，什么类型的用户将被发送http请求参数名为'q'的服务器，以获取新的数据。

url：从远程URL来加载列表数据

method：http方法检索列表数据

data：列表中被加载的数据

filter：定义如何过滤本地数据“模式”设置为'local'

formatter：定义如何呈现行

loader：定义如何从远程服务器加载数据

具体代码如下：

<td class="DF_GTable_RTD_Style"><input class="easyui-combobox" name="username" id="userId" data-options="required:true,valueField:'ID',textField:'name',panelHeight:'auto',panelMaxHeight:300,panelMinHeight:200" url="../../Controller/user.ashx?Action=GetUserNameList" style="width: 100%" />  </td>

$(function () {$.extend($.fn.combobox.methods, {selectedIndex: function (jq, index) {if (!index) {index = 0;}$(jq).combobox({onLoadSuccess: function () {var opt = $(jq).combobox('options');var data = $(jq).combobox('getData');for (var i = 0; i < data.length; i++) {if (i == index) {$(jq).combobox('setValue', eval('data[index].' + opt.valueField));break;}}}});}});//下拉框:表格样式$('#userId').combobox({prompt: '输入关键字自动检索',filter: function (q, row) {var opts = $(this).combobox('options');return row[opts.textField].indexOf(q) > -1;//将从头位置匹配改为任意匹配
                },onHidePanel: function () {var valueField = $(this).combobox("options").valueField;var val = $(this).combobox("getValue");  //当前combobox的值var allData = $(this).combobox("getData");   //获取combobox所有数据var result = true;      //为true说明输入的值在下拉框数据中不存在for (var i = 0; i < allData.length; i++) {if (val == allData[i][valueField]) {result = false;}}if (result) {$(this).combobox("clear");}}}).combobox('selectedIndex', 0);});

转载于:https://www.cnblogs.com/xiarongjin/p/8328978.html

EasyUi模糊匹配搜索框combobox相关推荐

Android通讯录模糊匹配搜索实现号码首字母简拼全拼
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! Andr ...
Android通讯录模糊匹配搜索实现（号码、首字母、简拼、全拼）
Android通讯录模糊匹配搜索实现(号码.首字母.简拼.全拼) 2013年12月10日工作记录小巫在工作中碰到一个需求,要求实现通讯录联系人的搜索,获取联系人的方式有好几种,我都有点混乱了,下面 ...
Android通讯录模糊匹配搜索实现（号码首字母简拼全拼）
Android通讯录模糊匹配搜索实现(号码.首字母.简拼.全拼) 2013年12月10日工作记录小巫在工作中碰到一个需求,要求实现通讯录联系人的搜索,获取联系人的方式有好几种,我都有点混乱了,下面 ...
Elasticsearch实战（十一）---前缀模糊匹配搜索 prefix search
Elasticsearch实战- 前缀模糊匹配搜索 prefix/wildcard/regexp search 文章目录 Elasticsearch实战- 前缀模糊匹配搜索 prefix/wildca ...
android 模糊查询下拉菜单,android 模糊查询搜索框_基于心智模型，解析蜻蜓Fm「搜索」功能...
本文以心智模型为理论依据,分析了蜻蜓Fm[搜索]功能的用户操作路径以及app设计. 最近在做搜索相关的改版设计工作,以下是我在体验现有搜索逻辑的情况下,产生的一些想法: 对于搜索这个功能,用户到底是怎 ...
Android通讯录模糊匹配搜索实现（号码、首字母，移动应用开发课程设计心得
Log.i("wwj", sb.toString()); } cursor.close(); return contacts; } 关于模糊匹配,我真的有点头大,我想到的是用正则表 ...
liunx 对日志文件进行模糊匹配搜索，并查出指定范围的内容
liunx 对日志文件进行搜索 1.关键字模糊匹配文件中的内容,并显示行号 grep -n "关键字" /上级目录/文件名.txt 2.根据行号检索范围内的日志 sed -n ...
android 模糊查询搜索框_彻底搞懂 iOS 和 Android 的设计差异
设计经验分享 · 不定时更新 ------------------------------------------- 胡桃子深圳 | UI/UX设计师唧唧歪歪:设计师在做 app 的时候很少考虑两 ...
easyui的下拉框combobox在包含的iframe页面里点击不能收回解决办法
此处下拉框不能收回是因为iframe是新页面,点击事件不能传递到父级页面.我们需要在父级页面监听iframe页面的点击事件,进而操作下拉框的动作: 以下是获取iframe的js: var iframe ...
android 输入模糊匹配_Android通讯录模糊匹配,搜索实现高亮关键字（号码、首字母、简拼、全拼）...
功能展示: 2017-05-27-09mz02.gif 2017-05-27-09mz04.gif 2017-05-27-09mz03.gif 2017-05-27-08mz01.gif 功能要求:通 ...

EasyUi模糊匹配搜索框combobox

EasyUi模糊匹配搜索框combobox相关推荐

最新文章

热门文章