Jquery Chosen:使用Tab键填充Multiple Select

时间:2013-03-27 19:56:12

标签: jquery jquery-chosen

http://harvesthq.github.com/chosen/

这是示例页面,它有多选输入。

当我开始输入时,它会突出显示选项。此时,当我按Tab键时,焦点移动到其他输入上,并将前一个输入留空。我想在用户开始输入时添加新选项,例如,用户输入'af','Afganistan'突出显示,用户按Tab键按钮,必须添加Afganistan。

我尝试处理tab键,然后执行$(optionid).click()来模拟鼠标或输入select,但它不起作用

2 个答案:

答案 0 :(得分:2)

在Chosen上添加事件处理程序时,我已经尝试了所有我能想到的但是无济于事。我已经尝试捕捉标签按下并模拟突出显示项目的点击并模拟按输入字段上的Enter但无效。

然而,我认为如果你愿意攻击选择,只需要进行一些非常小的改动。

首先改变:

Chosen.prototype.keydown_checker = function(evt) {
    ...
    //Replace the existing "case 9:" with this:
    case 9: //tab
        if(!this.is_multiple){
            if (this.results_showing && !this.is_multiple) {
                this.result_select(evt);
            }
            this.mouse_on_container = false;          
        }
        else {
            evt.preventDefault();
        }
        break;
    ...
}

第二次改变:

AbstractChosen.prototype.keyup_checker = function(evt) {
    ...
    case 9: //Simply add this above "case 13:" and remove "case 9:" from further down the switch statement
    case 13: //Enter
    ...
}

编辑:我现在使用他们的捆绑示例页面测试了它,它似乎正在工作。如预期的那样。

答案 1 :(得分:0)

我做了一些改变,得到了我想要的东西。 thx,Peter Herdenborg!

AbstractChosen.prototype.keyup_checker = function (evt) { ...
    ... 
    case 9:
        if (this.search_field.val().length != 0) {
              if (this.results_showing) return this.result_select(evt);
        }
        break;
    case 13:
    ...

和第二

Chosen.prototype.keydown_checker = function (evt) {
      case 9:
          if (!this.is_multiple) {
              if (this.results_showing && !this.is_multiple) {
                        this.result_select(evt);
                    }
              this.mouse_on_container = false;
          }
          else {
             if (this.search_field.val().length != 0) evt.preventDefault();
         }
         break;