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事件，并在您单击或切换到输入后执行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
       }
    );
});

关于Ajax加载内容的JQuery Autocomplete

3 个答案: