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

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

Здесь, где ему ответили раньше: Bind 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);
 }
});

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

Ответы

Ответ 1

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

$(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, потому что мне нужно повторно запустить событие, и я не знаю, как это сделать с событиями key/mouse.

Обновить. Вы также можете использовать 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, которые могли бы сделать это решение проще (хотя я еще не использовал его сам, поэтому я не могу говорить по опыту).

Ответ 2

Это, по-видимому, является некоторой особенностью взаимодействия между .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(), параметр события во внутренних событиях работает по-разному, сохраняя разные значения. С помощью функции live() event.target.id в функции выбора будет содержать идентификатор выбранного элемента ввода. Но с on() event.target.id в select будет содержать идентификатор списка элементов автозаполнения (ui-active-menuitem). С помощью функции on() вы можете получить доступ к идентификатору входного элемента с помощью event.target.id из функций изменения и открытия.