3

Jquery UI Autocomplete を使用していますが、うまく機能しますが、この問題を回避しようとしており、助けていただければ幸いです。オートコンプリートは、asp パネル内のテキスト ボックスにあります。フォームの既定の動作は、Enter キーでフォームを送信することです。ユーザーがオートコンプリート テキスト ボックスに何かを入力して Enter キーを押すと、オート コンプリート Web サービスが起動し、Enter キーで結果が返されるようにします。オンラインで読みましたが、オートコンプリートの Keypress イベントを処理することになっていました。試してみましたが、オートコンプリートを呼び出してキープレスを起動する方法がわかりません。キープレスで関数を呼び出すための正しい構文に問題があるため、コードの例を示してください。助けていただければ幸いです。コードは次のとおりです。

//Attach autocomplete to txtCity so user can lookup SPLCS by cities

        var city;
        var txtCity = $("[id$=txtAutoCity]")
        $(txtCity).autocomplete({
            source: function (request, response) {
                request.term = request.term.replace(/[^a-zA-Z\s]+/, "")
                $.ajax({
                    url: "../../Services.asmx/GetOfficesByCity",
                    data: "{ 'city': '" + 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) {

                            if (data.d != undefined) {
                                return {
                                    value: item.Display,
                                    result: item.CommaDelimited
                                }

                            }
                            else {
                                return true;
                            }
                        }))
                    },

                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(errorThrown);
                    }
                });
            },
            autoFill: false,
            minLength: 2,
            delay: 800,
            mustMatch: false,
            selecFirst: false,
            select: function (event, ui) {
                var selectedObj = ui.item;
                if (ui.item) {
                    city = ui.item.result.split(',')[0];

                    $("[id$=txtCity]").val(ui.item.result.split(',')[0]);
                    $("[id$=txtOffice]").val(ui.item.result.split(',')[1]);
                    $("[id$=txtDistrict]").val(ui.item.result.split(',')[2]);


                }
            },
            // Any action to be performed once the auto complete list closes
            close: function (event) {

            }
        }).keypress(function (e) {
            if (e.keyCode === 13) {
                //How to cancel default submit behaviour of form and call this
                //autocomplete function to fire??   
                e.preventDefault();
                //my_search_function($(txtCity).val())
            } 
        });
4

3 に答える 3

3

この問題を解決するには、次の手順に従って、オートコンプリートと新しい変数に検索プロパティを追加します。

  • 新しい変数を作成します (var canPass = false);
  • オートコンプリート内に検索プロパティを追加します。
  • keypress イベントで検索機能を起動します。

したがって、結果は次のとおりです。

// オートコンプリートを txtCity にアタッチして、ユーザーが都市別に SPLCS を検索できるようにします

    var canPass = false;
    var city;
    var txtCity = $("[id$=txtAutoCity]")
    $(txtCity).autocomplete({
        source: function (request, response) {
            request.term = request.term.replace(/[^a-zA-Z\s]+/, "")
            $.ajax({
                url: "../../Services.asmx/GetOfficesByCity",
                data: "{ 'city': '" + 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) {

                        if (data.d != undefined) {
                            return {
                                value: item.Display,
                                result: item.CommaDelimited
                            }

                        }
                        else {
                            return true;
                        }
                    }))
                },

                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });
        },
        autoFill: false,
        minLength: 2,
        delay: 800,
        mustMatch: false,
        selecFirst: false,
        select: function (event, ui) {
            var selectedObj = ui.item;
            if (ui.item) {
                city = ui.item.result.split(',')[0];

                $("[id$=txtCity]").val(ui.item.result.split(',')[0]);
                $("[id$=txtOffice]").val(ui.item.result.split(',')[1]);
                $("[id$=txtDistrict]").val(ui.item.result.split(',')[2]);


            }
        },
        // Any action to be performed once the auto complete list closes
        close: function (event) {

        },
        search: function (value, event) {
            if (!canPass) {
               event.preventDefault();
            }
            else {
               canPass = false;
            }
        },
    }).keypress(function (e) {
        if (e.keyCode === 13) {
           canPass = true;
           $(txtCity).autocomplete("search", ($txtCity).val());
        }
    });

したがって、このコードを使用すると、ENTER を押すとオートコンプリートが検索を開始します。

于 2014-09-18T21:33:05.087 に答える
1

オートコンプリート オブジェクトで検索機能を起動する必要があります。

($txtCity).autocomplete( "search", "TheSearchValueToSend" )

詳しくはJqueryどこサイトへ

于 2012-05-24T14:17:05.230 に答える
0

受け入れられた回答を参照してください。以下は無視してください

まず、私はあなたがこれについて間違った方法で考えていることをお勧めします。オートコンプリートの概念は、ユーザーが回答が完全に解決されるまで入力を続けることです (または、指定されたオプションから目的のオプションを選択します。これは、矢印キーで選択し、Enter キーを押して結果を選択することで実現できます)。

つまり、本当に ENTER 動作をオーバーライドしたい場合は、オートコンプリート ウィジェットの一部としてではなく、「キーダウン」を使用して個別に行うことをお勧めします。次の jsFiddle を参照してください。

敬具、

toepoke.co.jp

于 2012-05-24T10:24:19.307 に答える