4

現在、テキスト入力の直前に非表示フィールドがあるHTMLフォームがあります。簡略化されたバージョンは以下のとおりです。

<form>
    <input type="hidden" name="key" id="key" />
    <input type="text" name="account" id="account" />
    <input type="button" value="Submit" />
</form>

テキスト入力は、jQueryUIオートコンプリートで装飾されています。

$("#account").click(function () {
    $(this).prev().val('');
    $(this).val('');
}).autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "AJAX.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,
                        key: item.Key
                    }
                }))
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus + ": " + errorThrown);
            }
        });
    },
    select: function (event, ui) {
        $(this).prev().val(ui.item.key);
    },
    change: function (event, ui) {
        if ($(this).prev().val() == '') {
            $(this).val('');
        }
    }
});

上記のスクリプトは、ユーザーが情報をコピーして貼り付ける場合を除いて、完全に機能します。ほとんどのユーザーは、AJAXアカウントの検索が完了する前に、コピーして貼り付け、[送信]をクリックします。ユーザーは、スクリプトがドロップダウンから結果を選択する必要があることを知りません。そうしないと、非表示のフィールドにデータが入力されません。ただし、ほとんどのユーザーはせっかちで、最小限のクリックで物事をやりたいと思っています。

結果が1つあるペーストをインターセプトするにはどうすればよいですか？ユーザーが送信ボタンをクリックする前にこれを行うにはどうすればよいですか？

4

2 に答える 2

2

オートコンプリートメニューからの選択を強制する簡単な方法は、フォームの送信イベントをインターセプトし、＃keyに何かが含まれていない限りfalseを返すことです。

//assuming there is only one form within web page
$('form').submit(
    function(){
        if($('#key').val() == '') {
            return false
        } else {
            return true
        }
    });
于 2011-02-03T20:23:33.513 に答える
0

JornZaffererのプラグインを使用してみることができます。mustMatchこれには、ユーザーにリストからの選択を強制するオプションを指定できます。

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

If set to true, the autocompleter will only allow results that are presented by the backend. Note that illegal values result in an empty input box.

次に、バリデーターを使用して、フィールドに値があることを確認できます。

于 2011-02-03T20:18:00.990 に答える