Как узнать, было ли выбрано предложение в автозаполнении интерфейса JQuery UI?

Question

У меня есть текстовое поле, которое подключено к автозаполнению интерфейса JQuery UI. Когда пользователь вводит в поле мой поиск, он выполняет вызов ajax и возвращает предложения. Кажется, что могут произойти три вещи:

1. Автозаполнение предлагает варианты, и пользователь выбирает один из них
2. Автозаполнение предлагает варианты, но пользователь выбирает ни один из них
3. Автозаполнение не может внести предложение - нет совпадения (поэтому список предложений не отображается)

Имея дело со всеми вышеописанными сценариями, как я могу определить, выбирает ли пользователь параметр автозаполнения?

Я рассмотрел пометку флага, когда поиск начинается (match = false) и происходит выбор (match = true), но это не выглядит очень аккуратным способом.

Answer 1

Вы можете использовать событие select, например @ bfavaretto , но я думаю, что в этой ситуации удобнее использовать событие change:

$("#auto").autocomplete({
    source: ['hi', 'bye', 'foo', 'bar'],
    change: function(event, ui) {
        if (ui.item) {
            $("span").text(ui.item.value);
        } else {
            $("span").text("user picked new value");
        }
    }
});

Пример: http://jsfiddle.net/andrewwhitaker/3FX2n/

change срабатывает, когда поле размыто, но в отличие от нативного события change, вы получаете информацию о том, нажал ли пользователь на событие (ui.item является нулевым, если пользователь не щелкнул предложение).

Answer 2

Когда пользователь выбирает опцию, происходит событие «выбор». Вы можете прослушать его и установить флаг.

(function() {
    var optionSelected = false;
    $( ".selector" ).autocomplete({
        select: function(event, ui) { optionSelected = true; }
    });
})();

Answer 3

jQueryUI предоставляет событие select , вы должны определить его в параметрах автозаполнения (когда вы применяете автозаполнение к вводу формы).

Например (из документов ):

$( ".selector" ).autocomplete({
   select: function(event, ui) { ... }
});

Вы можете получить доступ к выбранному элементу через ui.item из обработчика событий.