7

オートコンプリートを使用して「トークン入力」スタイルのチェックボックスを作成しています（ユーザーが何かを入力し、応答を選択すると、DOMビューに「トークン」が追加されます）。

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

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

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

4

3 に答える 3

10

autocompleteこれは、の変更イベントで正常に機能するはずです。addこのコードは、リストに新しいアイテムを追加するときに表示されるIDのボタンがあることを前提としています。ユーザーがリストからアイテムを選択した場合は表示されません。いくつかの調整を行うことができますが、この概念実証により、次のことが可能になります。

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/

于 2012-06-11T17:37:58.550 に答える
1

Andrewから提供された回答により、ユーザーが「新規」を追加する代わりに配列から既存のアイテムを選択した場合でも、[新規追加]ボタンが残ります。

「追加」ボタンにトグルを含める代わりに、オートコンプリート内に使用できる組み込みの.change関数があります。

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

ユーザーが配列から選択した場合に「追加ボタン」を実際に非表示にする代替コードを参照してください。Andrew Whitakerのソリューションが実行しないこと：

$(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/

于 2014-07-12T22:32:36.770 に答える
0

古い質問ですが、役立つ答え：

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

$（ "＃auto"）。autocomplete（ "option"、 "source"、["Apples"、 "Oranges"、 "Bananas"、 "Plums"]）;

http://api.jqueryui.com/autocomplete/#option-sourceを参照してください

于 2017-06-15T13:56:43.960 に答える