Как связать автозаполнение пользовательского интерфейса jQuery с помощью .on ()? - PullRequest
Новая
       13

Как связать автозаполнение пользовательского интерфейса jQuery с помощью .on ()?

19 голосов
/ 14 марта 2012

На этот вопрос ответили для метода live (), но метод live () устарел с jQuery 1.7 и заменен методом .on (), и этот ответ не работает для on ().

Вот что было дано раньше: Привязка автозаполнения jQuery UI с использованием .live ()

Кто-нибудь знает, как сделать то же самое с помощью on ()?

Если вы измените синтаксис на что-то вроде 

$(document).on("keydown.autocomplete",[selector],function(){...});

из 

$([selector]).live("keydown.autocomplete",function(){...});

Это работает, но странным образом взаимодействует с внутренними событиями автозаполнения,С помощью live (), если вы используете событие select и обращаетесь к event.target, он дает вам идентификатор элемента ввода.Если вы используете on (), вы получите идентификатор выпадающего меню "ui-active-menuitem".Примерно так: 

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

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

Ответы [ 2 ]

22 голосов
/ 14 марта 2012

Если я правильно понял, ваша проблема выглядит очень похоже на ту, которую я видел в другой теме.Я адаптирую мой ответ к вашему делу, посмотрим, решит ли он вашу проблему: 

$(document).on("focus",[selector],function(e) {
    if ( !$(this).data("autocomplete") ) { // If the autocomplete wasn't called yet:
        $(this).autocomplete({             //   call it
            source:['abc','ade','afg']     //     passing some parameters
        });
    }
});

Рабочий пример на jsFiddle .Я использовал focus вместо keydown, потому что мне нужно повторно инициировать событие, и я не знаю, как это сделать с событиями клавиши / мыши.

Обновление :Вы также можете рассмотреть возможность использования clone, если ваши дополнительные входы будут иметь такое же автозаполнение, что и существующее: 

var count = 0;
$(cloneButton).click(function() {
    var newid = "cloned_" + (count++); // Generates a unique id
    var clone = $(source) // the input with autocomplete your want to clone
        .clone()
        .attr("id",newid) // Must give a new id with clone
        .val("") // Clear the value (optional)
        .appendTo(target);
});

См. обновленную скрипку .Существуют также шаблоны плагинов jQuery, которые могут упростить это решение (хотя я сам еще не использовал его, поэтому не могу говорить по опыту).

10 голосов
/ 14 марта 2012

Кажется, это просто особенность взаимодействия между .on () и автозаполнением.Если вы хотите сделать это: 

$(function(){
  $('.search').live('keyup.autocomplete', function(){
    $(this).autocomplete({
      source : 'url.php'
    });
  });
});

Это работает с on (): 

$(function(){
  $(document).on("keydown.autocomplete",".search",function(e){
    $(this).autocomplete({
      source : 'url.php'
    });
  });
});

Вы можете получить доступ к event.target.id элемента, для которого было вызвано автозаполнениес параметром функции обратного вызова on () ( e в приведенном выше коде).

Разница заключается в on (), параметре event во внутреннемСобытия работают по-разному, имеют разные значения.С помощью live () event.target.id в функции select будет содержать идентификатор выбранного элемента ввода.Но с помощью on () event.target.id в select будет содержать идентификатор списка элементов автозаполнения ( ui-active-menuitem ).С помощью on () вы можете получить доступ к идентификатору элемента ввода с помощью event.target.id из функций change и open .

...