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

Question

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

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

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

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

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

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

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

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

UPDATE

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

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

Answer 1

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

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

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

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

Answer 2

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

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

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

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

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

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

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

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

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

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

Answer 8

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

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

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' }); 
  });
});