Автозаполнение JQuery на Ajax-загруженном контенте

Question

Я хотел бы использовать плагин автозаполнения JQuery для поля ввода, загруженного с использованием Ajax:

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

$(document).ready(function() {
    $('#auto').live('keydown', function(){
        $(this).autocomplete(
          "/autocomplete",
          {
            delay:10,
            minChars:2,
            matchSubset:1,
            matchContains:1,
            cacheLength:10,
            onItemSelect:selectItem,
            onFindValue:selectItem,
            formatItem:formatItem,
            autoFill:true
        });
    });
});

Не могли бы вы сказать мне, если что-то не так с моим кодом?

Спасибо

Answer 1

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

Следующий код присоединяется ко всем (совпадающим) существующим и вновь созданным (Ajax) элементам focus события и выполняет autocomplete() регистрацию после того, как вы щелкнете по вкладке или введете вкладку:

$(document).delegate(":input[data-autocomplete]", "focus", function() {
    $(this).autocomplete({
        source: $(this).attr("data-autocomplete"),
    });
})

в этом примере селектор находит все элементы, имеющие атрибут "data-autocomplete", тот же атрибут используется в качестве исходного URL:

<input id="1" data-autocomplete="++URL++">

Importarnt: В зависимости от версии вы можете использовать функцию live(), delegate() или on(). Подписи этих трех немного отличаются, но довольно легко выяснить, как они сопоставляются друг с другом:

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

Answer 2

$('#auto').live('keydown', function(){

    $( "#auto" ).autocomplete({
    source: data,
    minLength: 3
    });

});

Выше работали для меня ...

Answer 3

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

$(document).ready(function() {
    $('#auto').autocomplete(
       "/autocomplete",
       {
            delay:10,
            minChars:2,
            matchSubset:1,
            matchContains:1,
            cacheLength:10,
            onItemSelect:selectItem,
            onFindValue:selectItem,
            formatItem:formatItem,
            autoFill:true
       }
    );
});