使easyui combobox控件支持上下键切换数据选项

 

使用combobox控件时，其操作方式为：

使用鼠标点击▼图标，显示panel后，使用鼠标点击，或者键盘的上下键来选择数据。

而录入人员习惯全键盘操作，不希望选择时还使用鼠标。其目标就是：当其获取焦点时，希望能使用键盘的上下键来选择数据。

为达到这个目标，就分析了easyui combobox的源代码，发现其设计人员已经考虑了这这种情况，只是提供的方法中限制只有当panel显示的时候才允许选择。

所以，把这个条件去掉了，就达到了目的。

具体修改内容如下：

/**
 * combobox - jQuery EasyUI
 *
 * Licensed under the GPL:
 *   http://www.gnu.org/licenses/gpl.txt
 *
 * Copyright 2010 stworthy [ [e-mail] ]
 *
 * Dependencies:
 *   combo
 *
 */

(function($) {

 ......

    function selectPrev(target) {
  var panel = $(target).combo('panel');
  var values = $(target).combo('getValues');
  var item = panel.find('div.combobox-item[value=' + values.pop() + ']');
  if (item.length) {
   // prev方法中去掉筛选：var prev = item.prev(':visible');
   var prev = item.prev();
   if (prev.length) {
    item = prev;
   }
  } else {
   item = panel.find('div.combobox-item:visible:last');
  }
  var value = item.attr('value');
  setValues(target, [value]);
  scrollTo(target, value);
 };
 function selectNext(target) {
  var panel = $(target).combo('panel');
  var values = $(target).combo('getValues');
  var item = panel.find('div.combobox-item[value=' + values.pop() + ']');
  if (item.length) {
   // next方法中去掉筛选： var next = item.next(':visible');
   var next = item.next();
   if (next.length) {
    item = next;
   }
  } else {
   item = panel.find('div.combobox-item:visible:first');
  }
  var value = item.attr('value');
  setValues(target, [value]);
  scrollTo(target, value);
 };

......

})(jQuery);

 

当然，也可以采用扩展的方式修改对象的行为。