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

Question

我正在使用标准自动填充插件here。

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

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

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

在上述情况下，一切正常。但是到目前为止，有两个巨大的错误：

1）用户必须实际点击列表中的result函数才能触发。因此，如果有一个项目苹果，并且用户只需将苹果直接输入到文本框中，则项目ID不会被填充。

2）用户可以从列表中选择苹果，填充项目ID。然后用户改变主意并回到文本框并输入橘子。同样，如果他实际上没有点击列表中的项目，项目ID不会改变，现在当提交表格时，提交了错误的项目ID。如果用户输入的东西不是有效的选择，例如他将文本框更改为applesblahblahblah，即使没有进行有效的项目选择，仍会提交项目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（非常大的库），但更灵活。它有很多事件可以用来强制验证。