Question

我正在使用表单的自动完成UI小部件来允许用户键入客户名称。我们的想法是，他们可以选择现有客户并填充表单中的其他字段，也可以自由键入要创建的新客户。当用户选择现有客户时，我使用select事件填充隐藏的输入以存储与该客户关联的ID。

我遇到的问题是，如果用户首先从列表中选择客户，然后进入并编辑文本，实际上创建了新客户，我需要能够清除隐藏的输入ID值。

我提到this SO question并创建了以下代码：

$(function() {
            $("#customerName").autocomplete({
                source: "/Customers/CustomerListJSON",
                minLength: 2,
                select: function(event, ui) {
                    $("#customerId").val(ui.item ? ui.item.Id : "");
                },
                change: function(event, ui) {
                    try {
                        $("#trace").append(document.createTextNode(event.originalEvent.type + ", "));
                        if (event.originalEvent.type != "menuselected")
                            $("#customerId").val("");
                    } catch (err) {
                        $("#customerId").val("");
                    }
                }
            });
        });

问题是更改事件是在blur上触发的，因此如果用户选择了一个客户，则会填充隐藏的输入值，但只要他们将焦点从输入框移开，它就会立即被清除。但是，如果我从blur测试中排除event.originalEvent.type事件，则隐藏字段的值永远不会在用户编辑先前选定值的原始方案中重置。

之前有没有人必须解决这个问题，如果有的话，你可以提供一些关于如何管理隐藏输入值的指导，这样当从列表中选择一个项目并清除时，它只会填充任何其他价值？

Answer 1

看起来我自己很快解决了这个问题。参考JQuery UI wiki，ui事件中的change项与select事件中的$(function() { $("#customerName").autocomplete({ source: "/Customers/CustomerListJSON", minLength: 2, select: function(event, ui) { $("#customerOrganizationId").val(ui.item ? ui.item.Id : ""); }, change: function(event, ui) { $("#customerOrganizationId").val(ui.item ? ui.item.Id : ""); } }); });项相同，因此我可以修改我的代码，如下所示：

ui

无需测试事件，只需检查select参数中是否有项目。 {{1}}事件中的ID设置可能是多余的，但为了安全起见，我将保留两者。

Answer 2

$(function() {
$("#customerName").autocomplete({
    source: "/Customers/CustomerListJSON",
    minLength: 2,
    select: function(event, ui) {
        $("#customerId").val(ui.item ? ui.item.Id : "");
    },
    change: function(event, ui) {
        try {
            $("#trace").append(document.createTextNode(event.originalEvent.type + ", "));
            if (event.originalEvent.type != "menuselected")
                $("#customerId").val("");
        } catch (err) {
            $("#customerId").val("");
        }
    }
});
});

JQuery UI自动完成更改事件 - 重置选择ID

2 个答案: