Привязка JQuery UI автозаполнения с помощью.live()

Question

Я искал везде, но я не могу найти никакой помощи...

У меня есть несколько текстовых полей, которые создаются динамически через JS, поэтому мне нужно привязать все их классы к автозаполнению. В результате мне нужно использовать новую опцию.live().

Например, чтобы связать все элементы с классом.foo сейчас и в будущем:

$('.foo').live('click', function(){
  alert('clicked');
});

Он принимает (и ведет себя) так же, как.bind(). Тем не менее, я хочу связать автозаполнение...

Это не работает:

$('.foo').live('autocomplete', function(event, ui){
  source: 'url.php' // (surpressed other arguments)
});

Как я могу использовать.live() для связывания автозаполнения?

ОБНОВИТЬ

Разобрался с Фреймером:

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

Answer 1

Если вы используете jquery.ui.autocomplete.js попробуйте это вместо

.bind("keydown.autocomplete") or .live("keydown.autocomplete")

если нет, используйте jquery.ui.autocomplete.js и посмотрим, будет ли это работать

Если это не относится, я не знаю, как помочь тебе, брат

Answer 2

Функция автозаполнения пользовательского интерфейса jQuery автоматически добавляет класс "ui-autocomplete-input" к элементу. Я бы рекомендовал динамическое связывание элемента в фокусе без класса "ui-autocomplete-input", чтобы предотвратить повторное связывание для каждого события нажатия клавиши в этом элементе.

$(".foo:not(.ui-autocomplete-input)").live("focus", function (event) {
    $(this).autocomplete(options);
});

редактировать

Мой ответ устарел с jQuery 1.7, см. Комментарий Натана Струца для использования с новым .on() синтаксис.

Answer 3

Просто чтобы добавить, вы можете использовать .livequery Плагин для этого:

$('.foo').livequery(function() {

    // This will fire for each matched element.
    // It will also fire for any new elements added to the DOM.
    $(this).autocomplete(options);
});

Answer 4

Чтобы автозаполнение работало при динамической загрузке для on() событие, используемое в jQuery > 1.7, с использованием синтаксиса, который Натан Струц предоставляет в своем комментарии:

$(document).on('focus', '.my-field:not(.ui-autocomplete-input)', function (e) {
    $(this).autocomplete(options)
});

где .my-field является селектором для вашего автозаполнения элемента ввода.

Answer 5

.live() не работает с фокусом. также keyup.autocmplete не имеет никакого смысла. Вместо этого я попробовал и работал это

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

Это прекрасно работает.

Answer 6

Ты не можешь.live() поддерживает только реальные события JavaScript, но не любое пользовательское событие. Это фундаментальное ограничение того, как работает.live().

Answer 7

Вы можете попробовать использовать это:

$('.foo').live('focus.autocomplete', function() {
    $(this).autocomplete({...});
});

Answer 8

После прочтения и тестирования ответов всех остальных я обновил его для текущей версии JQuery и сделал несколько настроек.

Проблема с использованием keydown как события, вызывающего .autocomplete() в том, что он не может автоматически заполнить эту первую напечатанную букву. Использование фокуса - лучший выбор.

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

Мой окончательный код выглядит следующим образом:

$(document).on('focus.autocomplete', '#myAutocomplete', function(e){
    $(this).autocomplete(autocompleteOptions);
    $(document).off('focus.autocomplete', '#myAutocomplete');
});

Answer 9

Это работает для меня:

$(function() 
{
  $('.item_product').live('focus.autocomplete', function()
  { 

    $(this).autocomplete("/source.php/", {
        width: 550,
        matchContains: true,
        mustMatch: false,
        selectFirst: false,
    }); 

  });
});

Answer 10

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

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

Answer 11

autocomplete - это не событие, а функция, которая включает функцию автозаполнения для текстового поля.

Так что если вы можете изменить js, который динамически создает текстовые поля, чтобы обернуть элемент текстового поля как объект jquery и вызвать автозаполнение для этого объекта.

Answer 12

Вы можете просто поместить автозаполнение во входное живое событие, например так:

$('#input-element').live('input', function(){
  
$("#input-element").autocomplete(options);

});