EasyUI 1.3.2 中 Combobox自动检索 键盘上下选择Bug问题
2014-11-26 17:33
357 查看
EasyUI 自带的Combobox控件,提供了下拉列值自动检索功能。
在用到的EasyUI 1.3.2版本中还是有点问题,在键盘上下键移动选择过程中只能定位在第一个,不能正常向下移动
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/19/11ca372c66ecc07b4f2ea7ca77977b6a.jpg)
问题解决方式:不多说,先直接贴代码。
在EasyUI核心文件jquery.easyui.min.js搜索找到对应下面的方法,修改对应的下面两处方法,OK了。
问题解决完,简单说一下具体原因:
在跟踪EasyUI和页面样式时,发现,在输入检索条件后,下拉列表中显示符合条件的内容,其余的则被添加style="display: none;",在页面中隐匿不可见。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/19/00f292593ed15e833e31738549da1fca.jpg)
在上面的源码中,我们可以看到对应的上下选择使用的是下面两个方法:
next(":visible"); 执行后,效果就是:选择下一个可见的列表项。看下jQuery 的API文档我们知道,next()函数只返回后面那个紧邻的同辈元素。
如果下一项处于隐匿状态,页面下拉列使用键盘上下选择也没有选中的效果。
(测试中发现,next()的"只返回后面那个紧邻的同辈元素" 优先级要高于":visible"选择器效果。如果下一项是隐匿状态,也会被选中,
只是被隐匿,不显示而已。验证的最直观方式是我们提交表单,会发现这个表单是带着值的。)
prev(":visible"); 效果同上。
知道了上面两个方法的特性,对源码作了简单修改。
prevAll(":visible:first"); 类上。
OK,阐述完毕,费了半天劲,希望能帮助到遇到同样问题的同志们。
在用到的EasyUI 1.3.2版本中还是有点问题,在键盘上下键移动选择过程中只能定位在第一个,不能正常向下移动
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/19/11ca372c66ecc07b4f2ea7ca77977b6a.jpg)
问题解决方式:不多说,先直接贴代码。
在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;",在页面中隐匿不可见。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/19/00f292593ed15e833e31738549da1fca.jpg)
在上面的源码中,我们可以看到对应的上下选择使用的是下面两个方法:
next(":visible"); 执行后,效果就是:选择下一个可见的列表项。看下jQuery 的API文档我们知道,next()函数只返回后面那个紧邻的同辈元素。
如果下一项处于隐匿状态,页面下拉列使用键盘上下选择也没有选中的效果。
(测试中发现,next()的"只返回后面那个紧邻的同辈元素" 优先级要高于":visible"选择器效果。如果下一项是隐匿状态,也会被选中,
只是被隐匿,不显示而已。验证的最直观方式是我们提交表单,会发现这个表单是带着值的。)
prev(":visible"); 效果同上。
知道了上面两个方法的特性,对源码作了简单修改。
nextAll(":visible:first"); 查找当前元素之后所有的同辈可见元素的第一个。
prevAll(":visible:first"); 类上。
OK,阐述完毕,费了半天劲,希望能帮助到遇到同样问题的同志们。
相关文章推荐
- EASYUI 1.4版 combobox firefox 下不支持中文检索的问题
- easyui datagrid表格可以通过键盘上下箭头键来选择行
- EASYUI 1.4版 combobox firefox 下不支持中文检索的问题
- EASYUI combobox firefox 下不支持中文检索的问题
- easyui combobox 拼音检索快捷选择输入
- 解决juqery easyui combobox只能选择问题
- ComboBox有下拉项,可是无法下拉,而用键盘上的上下键和滚轮都可以选择该ComboBox的items.
- AJAX自动提示,并添加有键盘上下选择功能
- asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)
- Easyui combobox 始终选择第一个的问题
- EasyUI_Datagrid编辑-键盘上下键选择行(一)
- jQuery-easyUI的使用:combobox实现联动选择及自动搜索
- 自动调整EasyUI combobox的panelHeight高度问题
- asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)
- 怎样解决启动WindowsXP进入登录欢迎界面时,自动开启小键盘NumLock的问题
- 使用jQuery.AutoComplete完成仿淘宝商品搜索功能(改进了键盘上下选择体验)
- 键盘上下键移动选择table表格行的js代码
- ExtJS PropertyGrid中使用Combobox选择值问题
- ExtJS PropertyGrid中使用Combobox选择值问题
- 解决笔记本登录时自动启动小键盘问题