Событие смены автозаполнения JQuery UI - сброс идентификатора выбора

Я использую виджет AutoComplete UI для формы, позволяющей пользователям вводить имя клиента. Идея состоит в том, что они могут либо выбрать существующего клиента, либо заполнить другие поля в форме, либо создать бесплатный тип нового клиента, который будет создан. Когда пользователь выбирает существующего клиента, я использую событие select для заполнения скрытого ввода для хранения идентификатора, связанного с этим клиентом.

Проблема, с которой я сталкиваюсь, - это то, что пользователь сначала выбирает клиента из списка, а затем переходит и редактирует текст, фактически создавая нового клиента, я должен уметь очищать это скрытое значение идентификатора входа.

Я упомянул этот вопрос SO и создал следующий код:

$(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, то значение скрытого поля никогда не получит reset в исходном сценарии, когда пользователь редактирует ранее выбранное значение.

Кто-нибудь должен был решить эту проблему раньше, и если да, то можете ли вы предложить некоторые рекомендации о том, как я могу управлять этим скрытым значением ввода, поэтому он заполняется только тогда, когда элемент выбран из списка и очищен любым другим значением?

Ответы

Ответ 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. Значение ID в событии select, вероятно, избыточно, но чтобы быть в безопасности, я собираюсь сохранить оба.

Ответ 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("");
        }
    }
});
});