代码之家 › 专栏 › 技术社区 › Josh Anderson

jquery用户界面自动完成更改事件-重置选择ID

autocomplete jquery-ui

Josh Anderson · 技术社区 · 16 年前

我正在使用表单的自动完成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 因此,如果用户选择了一个客户,则会填充隐藏的输入值,但一旦他们将焦点从输入框移开,就会立即清除隐藏的输入值。但是,如果我排除 模糊 事件来自 event.originalEvent.type 测试,然后隐藏字段的值永远不会在用户编辑以前选择的值的原始方案中重置。

以前有人必须解决这个问题吗?如果有,你能提供一些指导,告诉我如何管理隐藏输入的值,以便填充只有当从列表中选择项目并用任何其他值清除时?

2 回复 | 直到 13 年前

Josh Anderson 16 年前

看来我自己很快就解决了这个问题。指的是 JQuery UI wiki , the 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 : "");
        }
    });
});

不需要测试事件,只需要测试 用户界面 争论。中的ID设置 选择 这件事可能是多余的,但为了安全起见,我要保留这两件事。

Andrea 13 年前

$(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("");
        }
    }
});
});