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

Question

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

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

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

$(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, вероятно, избыточна, но для безопасности я собираюсь оставить оба.

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