EasyUI 自带的Combobox控件,提供了下拉列值自动检索功能。

在用到的EasyUI 1.3.2版本中还是有点问题,在键盘上下键移动选择过程中只能定位在第一个,不能正常向下移动

问题解决方式:不多说,先直接贴代码。

在EasyUI核心文件jquery.easyui.min.js搜索找到对应下面的方法,修改对应的下面两处方法,OK了。

 function _797(_798) {
var _799 = $(_798).combo("panel");
var _79a = $(_798).combo("getValues");
var item = _799.find("div.combobox-item[value=\"" + _79a.pop() + "\"]");
if (item.length) {
//var prev=item.prev(":visible"); 自身代码,有BUG,在手动输入条件检索过程中不能正常键盘上下选择
var prev = item.prevAll(":visible:first"); //用prevAll()替换上面方法
if (prev.length) {
item = prev;
}
} else {
item = _799.find("div.combobox-item:visible:last");
}
var _79b = item.attr("value");
_79c(_798, _79b);
_793(_798, _79b);
};
function _79d(_79e) {
var _79f = $(_79e).combo("panel");
var _7a0 = $(_79e).combo("getValues");
var item = _79f.find("div.combobox-item[value=\"" + _7a0.pop() + "\"]");
if (item.length) {
//var next=item.next(":visible");
var next = item.nextAll(":visible:first"); //此处对应改为nextAll()方法
if (next.length) {
item = next;
}
} else {
item = _79f.find("div.combobox-item:visible:first");
}
var _7a1 = item.attr("value");
_79c(_79e, _7a1);
_793(_79e, _7a1);
};

问题解决完,简单说一下具体原因:

在跟踪EasyUI和页面样式时,发现,在输入检索条件后,下拉列表中显示符合条件的内容,其余的则被添加style="display: none;",在页面中隐匿不可见。

在上面的源码中,我们可以看到对应的上下选择使用的是下面两个方法:

next(":visible");   执行后,效果就是:选择下一个可见的列表项。看下jQuery 的API文档我们知道,next()函数只返回后面那个紧邻的同辈元素。

如果下一项处于隐匿状态,页面下拉列使用键盘上下选择也没有选中的效果。

(测试中发现,next()的"只返回后面那个紧邻的同辈元素" 优先级要高于":visible"选择器效果。如果下一项是隐匿状态,也会被选中,

只是被隐匿,不显示而已。验证的最直观方式是我们提交表单,会发现这个表单是带着值的。)

prev(":visible");  效果同上。

知道了上面两个方法的特性,对源码作了简单修改。

           nextAll(":visible:first");   查找当前元素之后所有的同辈可见元素的第一个。

prevAll(":visible:first");   类上。

OK,阐述完毕,费了半天劲,希望能帮助到遇到同样问题的同志们。

EasyUI 1.3.2 中 Combobox自动检索 键盘上下选择Bug问题的更多相关文章

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

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

  2. 解答WPF中ComboBox SelectedItem Binding不上的Bug

    正在做一个打印机列表,从中选择一个打印机(System.Printing) <ComboBox Width="150" ItemsSource="{Binding ...

  3. C#中combobox不可编辑与不可选择

    不可编辑:comboBox.DropDownStyle = System.Windows.Forms.ComboBoxStyle.DropDownList; 将Style属性改为csDropDownL ...

  4. jQuery EasyUI 1.4.4 Combobox无法检索中文输入的问题

    在项目里使用了EasyUI的Combobox,当ComboBox的item是英文时,都能正常检索出对应项,但是如果使用中文输入法输入几个字母然后通过按shift键输入时,奇怪的事情发生了,combob ...

  5. jquery easyUI中combobox的使用总结

    jquery easyUI中combobox的使用总结 一.如何让jquery-easyui的combobox像select那样不可编辑?为combobox添加editable属性 设置为false ...

  6. easyui combobox 拼音检索快捷选择输入

    easyui combobox 拼音检索快捷选择输入 效果如图   $.ajax({ url: UserActionUrl + '?action=listuserworktype', dataType ...

  7. jQuery EasyUI Combobox无法检索中文输入的问题

    在项目里使用了EasyUI的Combobox,当ComboBox的item是英文时,都能正常检索出对应项,但是如果使用中文输入法输入几个字母然后通过按shift键输入时,奇怪的事情发生了,combob ...

  8. EasyUI 中 Combobox里的onChange和onSelect事件的区别

    EasyUI 中 Combobox 选项发生改变时会触发 onChange,onSelect,onClick 3 个事件. 最近要做一个级联的 Combo 菜单,类似于选择地址时让用户填写省,市,区的 ...

  9. EasyUi模糊匹配搜索框combobox

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

随机推荐

  1. 迭代器使用【阿里JAVA开发手册】

    调用迭代器的remove的方法(它的方法实现是:调用ArrayList的remove(index)方法 ) 然后游标cursor相应的进行减1操作

  2. Android学习笔记-事件处理

    第三章 Android的事件处理 Android提供两种事件处理方式,基于回调和基于监听器.前者常用于传统图形界面编程中,而后者在AWT/Swing开发中常用. 3.1 事件处理概述 对于基于回调的事 ...

  3. 使用OwnCloud搭建自己的云盘

    使用OwnCloud搭建自己的云盘 1.用途 ownCloud是一款开源的私有云框架,可以通过它实现个人网盘的功能,ownCloud提供了各个平台的文件同步客户端,因此搭建好ownCloud之后即可使 ...

  4. [ZZ] Valse 2017 | 生成对抗网络(GAN)研究年度进展评述

    Valse 2017 | 生成对抗网络(GAN)研究年度进展评述 https://www.leiphone.com/news/201704/fcG0rTSZWqgI31eY.html?viewType ...

  5. vue 将毫秒转为日期

    12345656546 | parseTime('{y}-{m}-{d} {h}:{i}')

  6. CentOS 7中允许远程连接mariadb数据库

    # /etc/init.d/mysql restart 或者 service mysqld start 启动服务 # /etc/init.d/mysql stop 或者 service mysqld ...

  7. C#工具类:Json操作帮助类(转载)

    原文转载自C#工具类:Json操作帮助类_IT技术小趣屋. Json序列化和反序列化在程序开发中时常会遇到,在C#中可以使用很多种方法实现对数据的Json序列化和反序列化,封装一个Json操作工具类来 ...

  8. C++中字符编码的转换(Unicode、UTF-8、ANSI)

    C++的项目,字符编码是一个大坑,不同平台之间的编码往往不一样,如果不同编码格式用一套字符读取格式读取就会出现乱码.因此,一般都是转化成UTF-8这种平台通用,且支持性很好的编码格式. Unicode ...

  9. meter命令行模式运行,实时获取压测结果 (没试过 说不定以后要用)

    jmeter很小,很快,使用方便,可以在界面运行,可以命令行运行.简单介绍下命令行运行的方式 上面一条命令应该可以满足大部分需求. 使用-R指定节点时,当然要首先在这些节点上启动jmeter-serv ...

  10. day1--一个简单的登录接口

    _usrename = "Yvan"_password = "abc123"count=0while count <3:    username = in ...