使用 .live() 绑定 jQuery UI 自动完成答案

【问题标题】：Bind jQuery UI autocomplete using .live()使用 .live() 绑定 jQuery UI 自动完成
【发布时间】：2011-05-31 21:01:21
【问题描述】：

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

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

【问题讨论】：

作为更新，live() 已被弃用，现在 on() 用于执行此操作，例如：$(document).on("keyup.autocomplete", '.autocomplete', function(){ $(this).autocomplete({ ... }); })...
有没有什么方法可以实现这种行为，而无需为添加的每个元素调用自动完成方法，而是调用一次且仅一次的自动完成方法？

标签： binding autocomplete jquery

【解决方案1】：

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

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

编辑

自 jQuery 1.7 以来，我的答案现在已经过时了，请参阅 Nathan Strutz 的评论以了解使用新的 .on() 语法。

【讨论】：

这是正确答案。 keyup 上的绑定似乎并没有针对第一次击键进行绑定。很聪明的想法。谢谢。
谢谢。我发现 'focus' 比 'keydown' 更好。
我对其进行了调整以与 datepicker 一起使用，并对其进行了更新以使用更新的 on() 语法。这是我的代码（抱歉缺少格式）：$(document).on("focus", ".dateField:not(.ui-datepicker-input)", function(event) { $(this).datepicker({dateFormat:"mm/dd/yy"}); });
@NathanStrutz 你刚刚救了我！当您在 Drupal 7 中对表单元素进行 AJAX 刷新时，您的代码是唯一仍然有效的东西！谢谢！
$( document ).on( "focus",".foo:not(.ui-autocomplete-input)",function (event) { $(this).autocomplete(options); } );

【解决方案2】：

如果您使用的是jquery.ui.autocomplete.js，请改用此方法

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

如果没有，请使用jquery.ui.autocomplete.js 看看它是否有效

如果这不适用，我不知道如何帮助你兄弟

【讨论】：

我正在使用 ui.autocomplete，而你的绑定工作:)。我可以触发警报...但这实际上并不能使其成为自动完成...如果我尝试在答案中更新的内容，则会出现语法错误...
这对我来说没有任何意义。自动完成功能仍未添加到新元素中，因此您无法绑定到它生成的任何事件。正确答案是 Dan 下面的答案。
这个答案是乱码，这是应该被接受的正确答案stackoverflow.com/a/6193792/340142

【解决方案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);
});

【讨论】：

这是我发现的最好的，最酷的插件！我想这也适用于日期选择器！自从我使用 jquery 以来，我一直在寻找这个……我只能投票一次……我的错……
非常推荐的插件，这将消除您的头痛

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

.live() 不适用于焦点。 keyup.autocmplete 也没有任何意义。相反，我尝试和工作的事情是这样的

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

这很好用。

【讨论】：

【解决方案6】：

你不能。 .live() 仅支持实际的 JavaScript 事件，不支持任何自定义事件。这是 .live() 工作方式的一个基本限制。

【讨论】：

【解决方案7】：

你可以试试这个：

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

【讨论】：

【解决方案8】：

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

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

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

我的最终代码如下：

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

【讨论】：

这是我见过的最好的答案，但仍然不是我想要的。我认为'on'方法的重点是你绑定到你知道不会被替换的最近的父级，所以你只绑定一次。在这里，您一次绑定到一个函数，该函数在每次添加新元素时绑定自动完成。这不是有点忽略了重点吗？ IE。每次添加新的输入元素时都会运行自动完成绑定，而不仅仅是一次。
您对on() 的看法是正确的，但自动完成不是一个事件。每次替换元素时，都需要再次在该元素上调用自动完成功能。您可以实现它，以便调用自动完成是替换元素的一部分，或者您可以设置一个事件侦听器，当您关注具有“自动完成”类的任何元素时自动调用自动完成。每次替换元素时都需要调用一种或另一种自动完成。我对其他人的解决方案持开放态度，我希望 jQuery 团队在未来的版本中解决这个缺点。

【解决方案9】：

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

因此，如果您可以修改动态创建文本框的 js，以将文本框元素包装为 jquery 对象并在该对象上调用自动完成功能。

【讨论】：

【解决方案10】：

我刚刚注意到您使用此答案编辑了您的帖子。这对我来说很明显，所以我在下面为其他人发布。谢谢。

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

【讨论】：

这会将 .search 元素转换为按下键后的自动完成元素。自动完成应该在按下任何键之前工作，并且它应该只被初始化一次，而不是在每个 keyup 事件之后。

【解决方案11】：

这对我有用：

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

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

  });
});

【讨论】：

【解决方案12】：

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

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

});

【讨论】：