使用 jQuery 自动完成插件验证输入

Question

我正在使用标准的自动完成插件here。

我的表单上有两个文本框，项目名称和项目 ID。这个想法是我希望用户按名称搜索项目，但在表单提交时我实际上需要项目 ID。

我从自动完成中使用的 ASP.NET MVC 操作返回 json。

用户开始输入项目名称，自动完成列表出现并被格式化以显示来自 json 对象的项目名称。然后，用户可以单击列表中的名称，项目 ID 将填充到另一个文本框中（一旦一切正常，这实际上将是一个隐藏字段）。然后我可以在提交表单之前检查第二个文本框中是否有值。

在上述场景中，一切正常。但到目前为止，我发现有两个巨大的错误：

1) 用户必须实际单击列表中的项目才能触发result 函数。因此，如果有一个项目 apples，而用户只是直接在文本框中键入 apples，则不会填充项目 ID。

2) 用户可以从列表中选择 apples，该列表填充项目 ID。然后用户改变主意并返回文本框并键入oranges。同样，如果他实际上没有单击列表中的项目，则项目 ID 不会更改，现在提交表单时会提交错误的项目 ID。如果用户输入的内容不是有效的选择，同样的事情，例如他将文本框更改为 applesblahblahblah，apples 的项目 id 仍将被提交，即使尽管没有做出有效的项目选择。

我看到的例子表明这可以通过触发 search 事件来解决，但我已经尝试过了，它似乎并没有起到太大作用。

有人知道如何解决这个问题吗？

目前为止我的代码如下，目前都很标准......

$('#ItemSearch').autocomplete("MyAction/FindItems", {
    dataType: 'json',
    parse: function(data) {
        var parsed = [];
        for (var i = 0; i < data.length; i++) {
            parsed[parsed.length] = {
                data: data[i],
                value: data[i].Value,
                result: data[i].Key
            };
        }
        return parsed;
    },
    formatItem: function(row) {
        return row.Value;
    }
}).result(function(event, data, formatted) {
    $(this).val(data.Value);
    $('#ItemId').val(data.Key);
}).blur(function() {
    // this is where I was trying to force an update of the item id textbox, 
    // but it doesn't work.
    $(this).search();
});

如果有任何指点，我将不胜感激。谢谢

编辑：如果有更好的自动完成功能来处理 json 和强制验证，我很乐意听到建议，因为它可能比尝试让这个工作更容易。

Answer 1

更好的自动完成可能是the jQuery UI autocomplete，它确实需要 jQuery UI（相当大的库），但更灵活。它有很多可用于强制验证的事件。