jquery - selected.js の複数選択で新しい値を許可する

Question

私は、ユーザーが選択から複数のオプションを選択できるようにするために、jQuery でselected.js プラグインhttp://harvesthq.github.com/chosen/を使用しています。しかし、私は今、彼らにまだ存在していない価値を創造させたいと思っています.

編集：SO独自のタグ選択/作成バーに似たものは、私が求めているものに近いでしょう

プラグインを変更または編集しないことが望ましいですが、必要に応じて行います。

コード: HTML:

<p>Select something</p>
<select name="theSelect[]" multiple="multiple">
    <option value="First Option">First Option</option>
    <option value="Second Option">Second Option</option>
</select>

Javascript:

$(function(){
    $('select').chosen();
});

したがって、ユーザーが「Third Option」と入力した場合、それをリストに追加して選択したいと思います。値と表示名は同じ/同じになるので問題ありません

Answer 1

ドキュメントによると、次のようなことを試すことができます。

$('select').append('<option>test</option>');
$('select').trigger('liszt:updated');

トニーが以下のコメントで述べたように：

"トリガーが "chosen:updated" になったバージョン 1.0 から始めます。

Answer 2

私は同じアイデアを探してこれに出くわしました。非常に人気のある機能リクエストのようで、いくつかのフォークがそれを実装しています。すぐにマスターブランチにマージされるようです。

魅力的なこの特定のプルの+1： https ：//github.com/harvesthq/chosen/pull/166

Koenpuntのフォークはここで表示できます：https ：//github.com/koenpunt/chosen

Answer 3

これが私がやった簡単な方法です：

$(".search-field").find("input").live( "keydown", function (evt) {
    var stroke;
    stroke = (_ref = evt.which) != null ? _ref : evt.keyCode;
    if (stroke == 9) { // 9 = tab key
        $('#tags').append('<option value="' + $(this).val() + '" selected="selected">' + $(this).val() + '</option>');
        $('#tags').trigger('chosen:updated');
    }
});

Answer 4

私はちょうど同じ問題を解決しようとしていました。ソースコードを少し修正しました。これが新しい keyup_checker 関数です。ケース13を見てください：

AbstractChosen.prototype.keyup_checker = function(evt) {
  var stroke, _ref;
  stroke = (_ref = evt.which) != null ? _ref : evt.keyCode;
  this.search_field_scale();
  switch (stroke) {
    case 8:
      if (this.is_multiple && this.backstroke_length < 1 && this.choices > 0) {
        return this.keydown_backstroke();
      } else if (!this.pending_backstroke) {
        this.result_clear_highlight();
        return this.results_search();
      }
      break;
    case 13:
      evt.preventDefault();
      if (this.results_showing) {
        if (!this.is_multiple || this.result_highlight) {
          return this.result_select(evt);
        }  

        $(this.form_field).append('<option>' + $(evt.target).val() + '</option>');
        $(this.form_field).trigger('liszt:updated');
        this.result_highlight = this.search_results.find('li.active-result').last();
        return this.result_select(evt);
      } 
      break;
    case 27:
      if (this.results_showing) this.results_hide();
      return true;
    case 9:
    case 38:
    case 40:
    case 16:
    case 91:
    case 17:
      break;
    default:
      return this.results_search();
  }
};

Answer 5

これが答えではないことはわかっていますが、別の解決策です。

オンザフライで追加する部分を探していたところ、http://ivaynberg.github.com/select2/#tagsが選択したものと同じものと「タグ付け」などの他のものを提供することがわかりました。

Answer 6

入力テキスト ボックスにイベントを添付して、特定の文字コードをリッスンすることができます。その後、オプションを追加し、ドロップダウンで更新をトリガーします。

 var dropDown = $('select.chosen');
 dropDown.parent().find('.chzn-container .chzn-search input[type=text]').keydown( function (evt) {
           var stroke, _ref, target, list;
           // get keycode
           stroke = (_ref = evt.which) != null ? _ref : evt.keyCode;
           target = $(evt.target);               
           // get the list of current options
           list = target.parents('.chzn-container').find('.chzn-choices li.search-choice > span').map(function () { return $(this).text(); }).get();
           if (stroke === 9 || stroke === 13) {
              var value = $.trim(target.val());
              // if the option does not exists
              if ($.inArray(value,list) < 0) {
                 var option = $('<option>');
                 option.text(value).val(value).appendTo(dropDown);
                 option.attr('selected','selected');
                 // add the option and set as selected
              }
              // trigger the update event
              dropDown.trigger("liszt:updated");
              return true;
           }
        });

Answer 7

選択した後のバージョンで動作するleogdionの回答への更新：

        var dropDown = $('#select_chosen');
        // Make the chosen drop-down dynamic. If a given option is not in the list, the user can still add it
        dropDown.parent().find('.chosen-container .search-field input[type=text]').keydown( 
            function (evt) {
               var stroke, _ref, target, list;
               // get keycode
               stroke = (_ref = evt.which) != null ? _ref : evt.keyCode;
               // If enter or tab key
               if (stroke === 9 || stroke === 13) {
                   target = $(evt.target);               
                   // get the list of current options
                   chosenList = target.parents('.chosen-container').find('.chosen-choices li.search-choice > span').map(function () { return $(this).text(); }).get();
                   // get the list of matches from the existing drop-down
                   matchList = target.parents('.chosen-container').find('.chosen-results li').map(function () { return $(this).text(); }).get();
                   // highlighted option
                   highlightedList = target.parents('.chosen-container').find('.chosen-results li.highlighted').map(function () { return $(this).text(); }).get();
                   // Get the value which the user has typed in
                   var newString = $.trim(target.val());
                   // if the option does not exists, and the text doesn't exactly match an existing option, and there is not an option highlighted in the list
                   if ($.inArray(newString,matchList) < 0 && $.inArray(newString,chosenList) < 0 && highlightedList.length == 0) {
                     // Create a new option and add it to the list (but don't make it selected)
                     var newOption = '<option value="' + newString + '">' + newString + '</option>';
                     $("#select").prepend(newOption);
                     // trigger the update event
                     $("#select").trigger("chosen:updated");
                     // tell chosen to close the list box
                     $("#select").trigger("chosen:close");
                     return true;
                  } 
                  // otherwise, just let the event bubble up
                  return true;
               }
            }
        )