Question

我到处搜索，但似乎找不到任何帮助...

我有一些通过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'
    });
  });
});

Answer 1

jQuery UI自动完成功能会自动将“ui-autocomplete-input”类添加到元素中。我建议在没有“ui-autocomplete-input”的情况下对焦点元素进行实时绑定 class，以防止重新绑定该元素中的每个keydown事件。

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

修改

我的答案现在已经过时了，因为jQuery 1.7，请参阅Nathan Strutz的评论，以便与新的.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

为动态加载jQuery＆gt;中使用的on()事件时，自动完成工作1.7，使用Nathan Strutz在他的评论中提供的语法：

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

其中.my-field是自动完成输入元素的选择器。

Answer 5

.live（）不支持焦点。 keyup.autocomplete也没有任何意义。相反，我尝试和工作的是这个

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

这完全没问题。

Answer 6

你做不到。 .live（）仅支持实际的JavaScript事件，而不支持任何自定义事件。这是.live（）工作原理的基本限制。

Answer 7

你可以试试这个：

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

Answer 8

在阅读并测试了其他人的答案之后，我已经为当前版本的JQuery更新了它并进行了一些调整。

使用keydown作为调用.autocomplete()的事件的问题在于它无法为键入的第一个字母自动完成。使用焦点是更好的选择。

我注意到的另一件事是，所有给定的解决方案都会导致多次调用.autocomplete()。如果要将一个元素动态添加到不再被删除的页面，则只应触发一次该事件。即使要删除项目并再次添加该项目，也应该删除该事件，然后在每次删除或添加元素时添加该事件，以便再次关注该字段不会每次都不必要地调用.autocomplete()。 p>

我的最终代码如下：

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

Answer 9

自动填充不是一个事件，而是一个为文本框启用自动完成功能的功能。

因此，如果你可以修改动态创建文本框的js，将textbox元素作为jquery对象包装，并在该对象上调用autocomplete。

Answer 10

我刚注意到你用这个答案编辑了你的帖子。这对我来说很明显，所以我将其张贴在其他人面前。谢谢。

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

Answer 11

这对我有用：

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

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

  });
});

Answer 12

您可以将自动填充功能放在输入实时事件中，如下所示：

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

使用.live（）绑定jQuery UI自动完成

12 个答案: