具有隱藏ID字段的jQuery UI自動完成

Question

目前，在文本輸入之前，我有一個帶有隱藏字段的HTML表單。 簡化的版本如下：

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

文本輸入已使用jQuery UI Autocomplete裝飾。

$("#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帳戶搜索尚未完成之前就復制並粘貼並單擊“提交”。 用戶不知道腳本需要他們從下拉菜單中選擇結果，否則隱藏字段將不會填充。 但是，大多數用戶不耐煩，希望通過最少的點擊即可完成操作。

如何截取有結果的粘貼？ 在用戶單擊提交按鈕之前，我該怎么做？

Answer 1

強制從自動完成菜單中進行選擇的一種簡單方法是攔截表單的Submit事件並返回false，除非#key中包含某些內容。

//assuming there is only one form within web page
$('form').submit(
    function(){
        if($('#key').val() == '') {
            return false
        } else {
            return true
        }
    });

Answer 2

您可以嘗試使用Jorn Zafferer的插件。 它具有一個選項，您可以指定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.

然后，您可以使用驗證器來確保該字段具有值。