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

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

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

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

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


jquery autocomplete jquery-ui jquery-ui-autocomplete jquery-autocomplete
person Mark Robinson    schedule 22.09.2011    source источник
comment
Нужно ли вам также знать, когда опция была не выбрана? То есть когда пользователь вводит значение, которого нет в списке предложений?   -  person Andrew Whitaker    schedule 22.09.2011
comment
Да, Эндрю, так как моя страница должна делать что-то другое, когда вводится значение, которого в настоящее время нет в базе данных.   -  person Mark Robinson    schedule 23.09.2011

Ответы (3)


arrow_upward
14
arrow_downward

Вы можете использовать событие 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 имеет значение null, если пользователь не щелкнул предложение).

person Andrew Whitaker    schedule 23.09.2011
comment
Это хороший ответ, если вы готовы подождать, пока поле размоется, прежде чем узнать, является ли элемент новым. Спасибо за участие, Андрей. - person Mark Robinson; 29.09.2011
comment
@Эндрю, это то, что я искал, но вместо того, чтобы задавать отдельный вопрос, если бы вы могли сообщить мне, это может быть превосходно. Что, если я хочу получить другое значение, введенное пользователем, которое не было выбрано из раскрывающегося списка автозаполнения? Как мне это получить? - person Gotham's Reckoning; 14.11.2014
comment
@Gotham'sReckoning: попробуйте $(this).value() - person Andrew Whitaker; 14.11.2014
comment
@AndrewWhitaker, разве это не дает оба значения вместе ?? как отличить?? между ними? - person Gotham's Reckoning; 14.11.2014
comment
@ Gotham'sReckoning: если они выберут значение, ui.item не будет null. Если код в блоке else достигнут, вызов $(this).val() просто получит значение на входе — вы знаете, что они не выбрали значение, потому что если бы они имели ui.item, это не было бы нулевым. Это помогает? jsfiddle.net/0cL1e2ar - person Andrew Whitaker; 14.11.2014
comment
это делает его лучше, спасибо за это, но в моем сценарии пользователь может добавить несколько значений, некоторые из которых предложены автозаполнением, и некоторые пользовательские значения, как я могу обрабатывать это отдельно? - person Gotham's Reckoning; 14.11.2014
comment
@ Gotham'sReckoning: это было бы более сложно - вам пришлось бы разделить ввод и посмотреть на свой источник, чтобы увидеть, какие из них были частью источника. Вероятно, стоит открыть новый вопрос - person Andrew Whitaker; 14.11.2014
comment
@AndrewWhitaker, не могли бы вы взглянуть на этот вопрос??[ссылка]stackoverflow.com/questions/26920777/ - person Gotham's Reckoning; 14.11.2014
comment
Обратите внимание, что пользователь по-прежнему может вручную ввести то же значение, что и одно из предложений, и это все равно будет означать, что пользователь выбрал новое значение. Если вам нужно узнать, является ли элемент действительно новым, вам нужно будет вручную проверить, есть ли он в списке предложений (или напрямую запросить источник данных). - person Matt Browne; 01.10.2015
comment
Обратите внимание, что пользователь по-прежнему может вручную ввести то же значение, что и одно из предложений, и это все равно будет означать, что пользователь выбрал новое значение. Если вам нужно узнать, является ли элемент действительно новым, вам нужно будет вручную проверить, есть ли он в списке предложений (или напрямую запросить источник данных). - person Matt Browne; 01.10.2015

arrow_upward
2
arrow_downward

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

(function() {
    var optionSelected = false;
    $( ".selector" ).autocomplete({
        select: function(event, ui) { optionSelected = true; }
    });
})();
person cellcortex    schedule 22.09.2011
comment
Спасибо, селлкортекс. Так что это в основном решение флага, которое я изложил в вопросе. Казалось бы, это не очень аккуратный способ делать то, что я хочу. Спасибо, что разъяснили это. - person Mark Robinson; 29.09.2011
comment
На самом деле это прекрасный/распространенный/достаточно элегантный способ делать что-то в JavaScript. Важная вещь, которую нужно сделать, это завернуть вещи в закрытие. - person cellcortex; 29.09.2011

arrow_upward
1
arrow_downward

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

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

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

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

person bfavaretto    schedule 22.09.2011