Jquery Chosen：使用 Tab 按钮填充多项选择答案

【问题标题】：Jquery Chosen: populate Multiple Select with Tab buttonJquery Chosen：使用 Tab 按钮填充多项选择
【发布时间】：2013-03-27 19:56:11
【问题描述】：

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

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

当我开始输入时，它会突出显示选项。在这一刻，当我按下 Tab 按钮时，焦点会移到其他输入上，并将之前的输入留空。我想在用户开始输入时添加新选项，例如，用户输入'af'，'Afganistan'被突出显示，用户按下Tab按钮并且必须添加Afganistan。

我尝试处理tab键，并做$(optionid).click()模拟鼠标或输入选择，但它不起作用

【问题讨论】：

标签： jquery jquery-chosen

【解决方案1】：

在 Chosen 之上添加事件处理程序时，我已经尝试了所有我能想到的方法，但无济于事。我尝试过按 Tab 键并模拟对突出显示的项目的点击，并模拟在输入字段上按 Enter，但无济于事。

但我认为，如果您愿意破解 Chosen，只需进行一些非常小的更改。

第一个变化：

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.5 版中我只需要更改 case 9: if (this.results_showing) { this.result_select(evt); } this.mouse_on_container = false; break;

【解决方案2】：

我做了一些改变，得到了我想要的。谢谢，彼得赫登堡！

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;

【讨论】：