Ajax 加载内容上的 JQuery 自动完成

Question

我想在使用 Ajax 加载的输入框中使用 JQuery 的自动完成插件：

我尝试使用以下代码来实现这一点，但是它仅在用户单击输入两次时才有效：

$(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 事件，并在您单击或按 Tab 键进入输入后执行 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
       }
    );
});