jquery - Jquery Chosen：タブボタンで複数選択を入力

Question

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

これがサンプルページで、複数選択入力があります。

入力を開始すると、オプションが強調表示されます。この時点で、Tab ボタンを押すと、フォーカスが他の入力に移動し、前の入力は空のままになります。ユーザーが入力を開始したときに新しいオプションを追加したいと考えています。

タブのキープレスを処理しようとしましたが$(optionid).click()、マウスをシミュレートしたり、選択を開始したりしましたが、機能しません

Answer 1

Chosen の上にイベント ハンドラーを追加することに関して考えられることはすべて試しましたが、役に立ちませんでした。タブの押下をキャッチして、強調表示された項目のクリックをシミュレートし、入力フィールドで 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;
    ...
}

2 番目の変更:

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
    ...
}

編集:バンドルされているサンプルページを使用してこれをテストしましたが、機能しているようです。意図した通り。

Answer 2

私はいくつかの変更を行い、私が望むものを手に入れました。thx、ピーター・ハーデンボルグ！

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:
    ...

そして2番目

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;