13

アカウントのオートコンプリートが必要な多くのフィールドを含む大きなHTMLフォームがあります。これらのフィールドにAccountLookupクラスのタグを付けると、jQueryがオートコンプリートのダーティな作業を行います。

$(".AccountLookup").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "Lookup.asmx/GetAccounts",
            data: "{ 'Search': '" + request.term + "' }",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataFilter: function (data) { return data; },
            success: function (data) {
                response($.map(data.d, function (item) {
                    return {
                        value: item.Value
                    }
                }))
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
    },
    minLength: 3
});

これで、ユーザーがオートコンプリートから何かを選択したときに、タグ付けされた入力フィールドの直前に非表示フィールドにデータを入力する必要があります。おそらく次のようなものを使用しています：

$(this).prev().val(item.Key);

この機能を組み込むにはどうすればよいですか？また、ユーザーにオートコンプリートから選択させるにはどうすればよいですか？（すべての値は事前定義されており、ユーザーは新しい値を追加できません。）

編集： 私がDOMを調べて理解している限り、選択オプションは現在、非表示のフォームフィールドに入力されています。

select: function (event, ui) {
    $(this).prev().val(ui.item.key);
}
4

5 に答える 5

17

これが古い投稿であることは知っています---しかし、同様の問題を解決しようとして（ユーザーにリストから項目を選択させる）...

        $("#ac").autocomplete({
            source: function (req, resp) {
                   //add code here...
            },
            select: function (e, ui) {
                $(this).next().val(ui.item.id);
            },
            change: function (ev, ui) {
                if (!ui.item)
                    $(this).val("");
            }
        });
于 2012-09-27T14:55:09.750 に答える
3 
$(".AccountLookup").autocomplete({
   /*...*/
}).result(function(event, item) {
   $(this).prev().val(item.Key);
});

jQuery 検証を使用して、フィールドが入力されていることを確認することもできます。

于 2010-12-21T17:47:43.687 に答える
1

強制選択には、オートコンプリートの「変更」イベントを使用できます

        var availableTags = [
            "ActionScript",
            "AppleScript"
        ];
        $("#tags").autocomplete({
            source: availableTags,
            change: function (event, ui) {
                if(!ui.item){
                    //http://api.jqueryui.com/autocomplete/#event-change -
                    // The item selected from the menu, if any. Otherwise the property is null
                    //so clear the item for force selection
                    $("#tags").val("");
                }

            }

        });
于 2012-12-17T15:33:36.403 に答える
0

選択アクションについては、formatItemオプションを使用してみてください。各結果をフォーマットして、他のテキストボックスに入力する onclick イベントを作成できます。

オートコンプリートからの選択を強制するには、mustMatchオプションを使用する必要があります。

http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions

于 2010-12-21T17:45:06.510 に答える