jQueryUI 在多个字段上自动完成

Question

我正在使用 jQueryUI 1.8，它具有自动完成功能。

到目前为止，我已经成功地在多个领域实现了自动完成功能，如下所示:

$(function() {
    $("#auto").autocomplete({
        source: "/auto",
        minLength: 2,
        dataType: 'json',
        change: function( event, ui ) {
                $("#Id").val(ui.item ? ui.item.id : "");
                $("#Info").val(ui.item.info);
                $("#Info2").val(ui.item.info2);

        },
        select: function( event, ui ) {
                $("#Id").val(ui.item ? ui.item.id : "");
                $("#Info").val(ui.item.info);
                $("#Info2").val(ui.item.info2);
        }
    });
});

这个想法是在可用时使用隐藏 ID 保存表单，或者如果与数据库相比其中任何一个字段发生更改，则从字段 auto、info 和 info2 创建新记录。现在，如果我选择一条记录并修改自动字段，它就会像它应该的那样清除隐藏的 ID。但是，如果我选择一条记录并修改字段 info 或 info2，则所选的 id 保留在隐藏输入中，这是错误的。

解决这个问题的最佳方法是什么？

Answer 1

您只想在#Info或#Info2更改时清除#Id吗？您只需监听 keydown 或 change 事件即可做到这一点:

$("#Info, #Info2").keydown(function() {
    $("#Id").val('');
});

此外，您的更改函数会向我抛出错误，因为在 change 上，ui.item 并不总是被定义。以下是解决该问题的方法:

change: function(event, ui) {
    $("#Id").val(ui.item ? ui.item.id : "");
    if (ui.item) {
        $("#Info").val(ui.item.info);
        $("#Info2").val(ui.item.info2);
    }
},

我写了一个您想要做的示例:http://jsfiddle.net/dNdhk/ 。如果这不是您想要实现的目标，请告诉我。