Bind jQuery UI автозаполнения с использованием .live()

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

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

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

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

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

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

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

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

ОБНОВЛЕНИЕ

Выяснил это с помощью Framer:

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

Ответ 1

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

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

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

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

Ответ 2

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

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

Edit

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

Ответ 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);
});

Ответ 4

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

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

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

Ответ 5

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

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

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

Ответ 6

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

Ответ 7

Вы можете попробовать:

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

Ответ 8

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

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

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

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

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

Ответ 9

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

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

Ответ 10

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

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

Ответ 11

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

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

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

  });
});

Ответ 12

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

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

});