Обработка вставки значений в автозаполнении jquery - PullRequest
Новая
       8

Обработка вставки значений в автозаполнении jquery

0 голосов
/ 12 октября 2011

Извините, если это обсуждалось ранее, я попытался найти web / stackoverflow, но не смог найти правильный ответ.

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

Я обработал события выбора и изменения в автозаполнении, чтобы записать выбранный идентификатор в скрытое поле и удалить его, если совпадений не найдено. Это работает.

Вопрос в том, как мне поступить, когда пользователь вставляет правильное имя в автозаполнение (имя, которое действительно существует), но не нажимает на опцию выпадающего меню? В основном, событие select не срабатывает, и я застрял с правильным именем и скрытым полем, в котором нет соответствующего идентификатора? Я полагаю, что мне следует каким-то образом просмотреть доступные варианты и выбрать один, если он совпадает, но, к сожалению, я не знаю, как это сделать. Я пытаюсь использовать автозаполнение в качестве стандартного комбинированного списка, но с ... автозаполнением.

Надеюсь, я все понял, jQuery все еще для меня нов, поэтому я подбираю термины по мере продвижения:)

Спасибо.

UPDATE

Ну, вроде как нашел решение, но не совсем доволен им. Когда срабатывает событие изменения, если элемент не выбран, я перебираю свой JSON, пытаясь найти термин, введенный пользователем. 

change: function(event, ui) {           
    if (ui.item) 
        return false;

    $("#airport_end_id").val("");
    var entered_value = $("#airport_end").val();                    
    if (entered_value != "") {
        $.each(airports, function(key, airport) {
            if (airport.value == entered_value) {
                $("#airport_end_id").val(airport.id);
                return false;
            }
        });
    };                
    return false;
},

Я только изучаю JavaScript / jQuery, поэтому этот код может выглядеть как большая куча ... :) Не в восторге от этого, поскольку он, вероятно, будет ужасно неэффективным (json должен содержать около 2000-4000 строк, в настоящее время он очень мал с моими тестовыми данными). Я бы предпочел перебрать скрытый ui-autocomplete ul, который принадлежит этому полю (который уже отфильтрован по словам, введенным пользователем), но так как у меня есть несколько полей автозаполнения, которые содержат те же данные, я не знаю, как найти пользовательский интерфейс - автозаполнение ul, соответствующее сфокусированному полю.

В основном скрытые ul для двух полей автозаполнения абсолютно одинаковы: 

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: -875px; left: 164px; display: none; position: relative; width: 300px;"></ul>

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: -875px; left: 164px; display: none; position: relative; width: 300px;"></ul>

Можно ли добавить идентификатор или что-то для автозаполнения UL, чтобы я мог его отследить?

Еще раз спасибо за любую помощь.

Ответы [ 2 ]

0 голосов
/ 14 октября 2011

Решил эту проблему, используя .autocomplete ("widget") и добавив определенный класс в пользовательское меню.

0 голосов
/ 13 октября 2011

Вы можете посмотреть на событие autocompletechange. Он будет срабатывать, когда поле теряет фокус и содержит новое значение, даже если оно не было выбрано в раскрывающемся списке автозаполнения. 

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