jQueryオートコンプリートリアルタイムに値を追加する

Question

私は "トークン入力"スタイルのチェックボックスをオートコンプリートで作成しています（ユーザーは何かを入力し、レスポンスを選択してDOMビューにトークンを追加します）。

jQueryオートコンプリートを使用すると、ユーザーが入力した後にsourceのリストにない値を追加する方法はありますか？

たとえば、ソースは["Apples", "Oranges", "Bananas"]のようになります。テキストフィールドを使用する場合、ユーザーは"plums,"と入力します。ユーザーが望むなら「ソース」のリストに「プラム」を追加する方法はありますか？ selectとchangeというイベントがあることはわかりますが、selectは選択するものがある場合にのみ動作し、changeは入力を停止したことを確認するために何らかのタイムアウトチェックが必要です。

逆に、この動作を達成するために使用できる別のプラグインがありますか？

Answer 1

これはautocompleteの変更イベントで問題なく動作します。このコードでは、新しいアイテムをリストに追加するときに表示されるidがaddのボタンがあると想定しています。ユーザーがリストからアイテムを選択した場合は表示されません。そこ行うことができ、いくつかの調整がありますが、この概念の証明は、それを可能にする必要があります。

var source = ["Apples", "Oranges", "Bananas"]; 

$(function() { 
    $("#auto").autocomplete({ 
     source: function (request, response) { 
      response($.ui.autocomplete.filter(source, request.term)); 
     }, 
     change: function (event, ui) { 
      $("#add").toggle(!ui.item); 
     } 
    }); 

    $("#add").on("click", function() { 
     source.push($("#auto").val()); 
     $(this).hide(); 
    }); 
}); 

はここに例を示しますhttp://jsfiddle.net/rmGqB/

---

アップデート：私は少しの要件を誤解ようが鳴ります。また、オートコンプリートがで候補リストに移入し、検索の結果は、いずれかの正確な一致が得られたかどうかに基づいて、ボタンの可視性を推進することを結果を活用することができます

var source = ["Apples", "Oranges", "Bananas"]; 

$(function() { 
    $("#auto").autocomplete({ 
     source: function (request, response) { 
      var result = $.ui.autocomplete.filter(source, request.term); 

      $("#add").toggle($.inArray(request.term, result) < 0); 

      response(result); 
     } 
    }); 

    $("#add").on("click", function() { 
     source.push($("#auto").val()); 
     $(this).hide(); 
    }); 
}); 

例：http://jsfiddle.net/VLLuJ/

Answer 2

ユーザーは、「新規」を追加するのではなく、既存の項目を配列から選択した場合でも、ADD NEWボタンを残します。

「追加」ボタンにトグルを追加するのではなく、オートコンプリート内に組み込みの.change関数を使用することができます。

"変更"は、テキストボックスのフォーカスが失われるまで待機しますが、配列に一致するものがない場合は、ADD BUTTONを表示するためのより良いインターフェイスです。 （または追加の「確認」を作成することができます）。

ユーザーが配列から選択すると、実際には「追加ボタン」を隠す代替コードを参照してください。アンドリュー・ウィテカーのソリューションは行いません何か：

$(function() { 

    var source = ["Apples", "Oranges", "Bananas"]; 

    $("#auto").autocomplete({ 
    source: function (request, response) { 
     var result = $.ui.autocomplete.filter(source, request.term); 


     response(result); 
    }, 
    change: function(event, ui) { 
     var $label = $(this); 
     // figure out the id of hidden input box from label id 
     var $id = $('#'+this.id.replace('label_','id_')); 
     if (ui.item === null && $label.val() != ''){ 
     $("#add").show();    
     } 
     if(ui.item != null && $label.val() != ''){ 
     $("#add").hide();    
     } 
    } 
    }); 

    $("#add").on("click", function() { 
    source.push($("#auto").val()); 
    $(this).hide(); 
    }); 

}); 

はアクションで自分の改訂フィドルを参照してください - http://jsfiddle.net/VLLuJ/25/

Answer 3

古い質問が、便利な答え：

をオートコンプリートソースを更新するには、セッターを使用します。

$（ "＃auto"）。オートコンプリート（ "オプション"、 "ソース"、 ["リンゴ"、 "オレンジ"、 "バナナ"、 "プラム"））;

はhttp://api.jqueryui.com/autocomplete/#option-source