選択した複数のJQueryプラグインに動的にオプションを追加する

Question

ユーザが選択した複数選択入力のテキストフィールドに入力したテキストをオプションとして追加し、自動的に選択します。オプションが存在する場合、それを選択したいと思います。これまでのところ、私はこれを行うために管理している：入力フィールドがkeydown_check関数内でフォーカスされている間、ユーザーがEnterキーを押すたび

Chosen.prototype.add_text_as_option = function() { 
    $('#id_select').append(
     $('<option>') 
       .html(this.search_field.val()) 
       .attr('selected', 'selected') 
       .attr('value', 0) 
    ); 
    $('#id_select').trigger("liszt:updated"); 
    return false; 
}; 

私はこの関数を呼び出します。

私は2つの問題を抱えて：ユーザーがEnterキーを押すとオプションの部分文字列を入力したとき、

• 最優先し、オプションが選択され得ることはありませんが、サブストリングテキストが追加され、選択されます。私が望むものではありません。
例えば

：私はオプション「foo」を持っている、と私はEnterキーを押すとので、候補として最初 オプション（「foo」を）迎えます選ばれた、「FO」を入力して起動した場合、それを選択する必要があります代わりに、私は実際に "foo"を選択したいときに、オプションとして "fo"が追加されて選択されます。

「foo」をクリックして選択すると、すべて正常に動作します。オプション選択マークが選択され、部分文字列がオプションの一部として使用されます。

元の機能をすべて失うことなく、選択したものに存在しないオプションを追加するにはどうすればよいですか？

• どうやって選ばれたプラグインの内側に選ばれたwhith私はinitilized選択、複数のフィールドにアクセスすることができますか？上のコードで分かるように、複数選択フィールドのIDはハードコードされています。ユーザーが新しいオプションを追加したときに、選択を更新できるようにするためにこれを実行したいと思います。

• 私が探している機能は、事前にlinkedin

感謝のスキルウィジェットと非常によく似ています！

Answer 1

選択したプラグインに基づいているselect2プラグインを試してみる必要がありますが、要素を動的に追加するとうまく動作します。

HERESにリンク

：自動トークン化のための一例で http://ivaynberg.github.com/select2/

見て、私はそれはあなたが探しているものかもしれないと思います。

Answer 2

ちょうど私がこのような何かを書いたので、今日はこれを必要と押す文字が keyup_checkとは異なり

Answer 3

を初期化される前に keydown_checkが呼び出されるkeyup_checkそれを呼び出す：「＃」newtagフォームで

$(function() { 
    // form id 
    $('#newtag').alajax({ 
     // data contains json_encoded array, sent from server 
     success: function(data) { 
      // this is missing in alajax plugin 
      data = jQuery.parseJSON(data); 
      // create new option for original select 
      var opt = document.createElement("OPTION"); 
      opt.value = data.id; 
      opt.text = data.name; 
      opt.selected = true; 
      // check if the same value already exists 
      var el = $('#tags option[value="' + opt.value + '"]'); 
      if(!el.size()) { 
       // no? append it and update chosen-select field 
       $('#tags').append(opt).trigger("chosen:updated"); 
      } else { 
       // it does? check if it's already selected 
       if(!el[0].selected) { 
        // adding already existent element in selection 
        el[0].selected = true; 
        $('#tags').trigger("chosen:updated"); 
       } else { 
        alert("Already selected and added."); 
       } 
      } 


     } 
    }) 
}); 

を「.alajax」はpluginで、フォームデータを非同期で送信し、サーバーのレスポンスをJSON形式で返します。コントローラでは、タグが存在するかどうかを確認します。それ以外の場合は作成します。私は5つの "jsoned"タグオブジェクトに応答しています。

Answer 4

jquery selectedを作成しました。これは、テキストを取り込んでオプションとして作成します。jqueryの以前のバージョンでは、施設作成オプションがあります。

create_option: true; 
persistent_create_option: true; 
skip_no_results: true; 

あなたはこのコードを使用することができます：

$('#id_select').chosen({ 
    width: '100%', 
    create_option: true, 
    persistent_create_option: true, 
    skip_no_results: true 
}); 

jsfiddleリンクを：私が見つけ

Answer 5

https://jsfiddle.net/n4nrqtek/ソリューションの複数の

var str_array = ['css','html']; 
$("#id_select").val(str_array).trigger("chosen:updated");