Как реализовать функции автозаполнения jQuery UI 'autoFill' и / или 'selectFirst'? - PullRequest
Новая
       11

Как реализовать функции автозаполнения jQuery UI 'autoFill' и / или 'selectFirst'?

0 голосов
/ 14 февраля 2011

Во-первых, позвольте мне начать с того, что я знаю о других подобных вопросах, как этот здесь:

Как реализовать "mustMatch" и "selectFirst" в jQuery UI Autocomplete?

но это не совсем то, что я ожидал. Я объясню почему ниже. Мне также известно об этом простом руководстве, опубликованном первоначальным разработчиком плагина:

http://www.learningjquery.com/2010/06/autocomplete-migration-guide

и я сделал много реализаций предыдущего плагина и несколько довольно настраиваемых реализаций плагина пользовательского интерфейса.

Сказав это, вот моя проблема и почему первое решение не работает для меня. Соучастие происходит из БД в виде объектов JSON. Я использую пользовательскую функцию для установки параметров, см. Ниже: 

source: function (request, response) {
   var sourceData = $.parseJSON(result); //result is an array coming in via ajax
   response($.map(sourceData, function (item) {
      return { label: item.PortName, value: item.PortName, source: item };
      //item has about 12 properties that could be used for other forms.
   }))
}

Затем у меня также есть пользовательское событие change(), которое захватывает source выше и выполняет несколько вещей, таких как сохранение самого элемента в объекте data() элемента, а также анализ некоторых данных item объект для использования в других полях формы и т. д.

Приведенное выше решение только устанавливает значение ввода для первой опции автозаполнения, но оно не реплицирует событие select или change автозаполнения. Так что на самом деле это не настоящая selectFirst или autoFill копия.

Функция change выглядит следующим образом: 

change: function (event, ui) {
            if (ui.item) {
                $('input:[name="another_form_field"]').val(ui.item.source.PortId);
            }
            else {
                $(this).val('');
                $('input:[name="release_port_id"]').val('');
            }
        }

, которая на данный момент является быстрой, простой реализацией функции mustMatch. Скорее всего, это изменится, когда я реализую эти 2 функции.

Хорошо, со всем, что сказано, какие-либо предложения о том, как реализовать одну или обе эти функции? Я попытался прикрепить событие blur, как предложено в вопросе выше, но это не сработает.

заранее спасибо.

EDIT : Это то, что я пробовал до сих пор. Привязка события blur к элементу автозаполнения. Закомментированная строка использует значение первого элемента в раскрывающемся списке и задает текст ввода. Это сработало бы, если бы это все, что мне нужно, но мне нужно повторить событие select, что означает, что мне нужно больше данных (а не только текст). 

.live('blur', function (e) {
        if ($('.ui-autocomplete li').length > 0) {            
            //$(this).val($(".ui-autocomplete li:visible:first").text());
            $(".ui-autocomplete li:visible:first").click();
        }
        else {
            $(this).val('');
            $('input:[name="release_port_id"]').val('');
        }
    });

Другая проблема, связанная с этим решением, заключается в том, что оно на самом деле переопределяет событие change в автозаполнении и не выполняется должным образом. Вот почему я включил раздел else. Это не совсем то, на что это будет похоже, но подтверждение концепции.

1 Ответ

1 голос
/ 16 февраля 2011

Я собирался опубликовать награду, но наконец понял.

Вот решение, которое я придумал. Поэкспериментировав с этим, я понял, что плагин использует .data() для хранения данных элемента опции. Таким образом, я смог получить полный объект и проанализировать данные, необходимые для выполнения других элементов. Тогда задача заключалась в том, чтобы распознать, когда выбор был действительным, даже если пользователь не щелкнул или не выбрал опцию. Для этого я проверяю, соответствуют ли какие-либо параметры значению, и повторю ли я select. В противном случае я очищаю поля. Затем я снова использовал .data(), чтобы запомнить, был ли выбор верным или нет, и если это не так, я смог снова очистить поля. Ниже мой код.

Комментарии приветствуются. 

$('#autocomplete_input').autocomplete({
        source: function (request, response) {
            $.get("/DataHandler.ashx", { Type: "ExpectedType", Query: request.term }, function (result) {
                var sourceData = $.parseJSON(result);
                response($.map(sourceData, function (item) {
                    return { label: item.PortName, value: item.PortName, source: item };
                }))
            });
        },
        minLength: 3,
        change: function (event, ui) {
            if (ui.item) {
                $('#another_element"]').val(ui.item.source.PortId);
            }
            else {
                if (!$(this).data('valid')) {
                    $(this).val('');
                    $('#another_element').val('');                    
                }
            }
            $(this).data('valid', false);
        }
    }).live('blur', function (e) {
        if ($('.ui-autocomplete li:visible').length > 0) {
            item = $($(".ui-autocomplete li:visible:first").data()).attr('item.autocomplete');
            $(this).val(item.label);
            $('#another_element').val(item.source.PortId);
            $(this).data('valid', true);
        }
    });
...