带有隐藏 ID 字段的 jQuery UI 自动完成答案

【问题标题】：jQuery UI Autocomplete with Hidden ID Field带有隐藏 ID 字段的 jQuery UI 自动完成
【发布时间】：2011-02-04 04:23:33
【问题描述】：

目前我有一个 HTML 表单，在文本输入之前有一个隐藏字段。简化版如下：

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

文本输入已经被 jQuery UI 自动完成修饰。

$("#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 你的代码帮助我完成了一些自动完成工作:-)

标签： javascript jquery jquery-ui jquery-ui-autocomplete

【解决方案1】：

强制从自动完成菜单中选择的一种简单方法是拦截表单的提交事件并返回 false，除非 #key 中有内容。

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

【讨论】：

【解决方案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.

然后您可以使用验证器来确保该字段具有值。

【讨论】：