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

Bind jQuery UI autocomplete using .live()

提问by sethvargo

I've searched everywhere, but I can't seem to find any help...

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

I have some textboxes that are created dynamically via JS, so I need to bind all of their classes to an autocomplete. As a result, I need to use the new .live() option.

我有一些通过 JS 动态创建的文本框，所以我需要将它们的所有类绑定到自动完成。因此，我需要使用新的 .live() 选项。

As an example, to bind all items with a class of .foo now and future created:

例如，要绑定所有具有 .foo 现在和未来创建的类的项目：

$('.foo').live('click', function(){
  alert('clicked');
});

It takes (and behaves) the same as .bind(). However, I want to bind an autocomplete...

它需要（和行为）与 .bind() 相同。但是，我想绑定一个自动完成...

This doesn't work:

这不起作用：

$('.foo').live('autocomplete', function(event, ui){
  source: 'url.php' // (surpressed other arguments)
});

How can I use .live() to bind autocomplete?

如何使用 .live() 绑定自动完成？

UPDATE

更新

Figured it out with Framer:

用 Framer 解决了这个问题：

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

采纳答案by Famver Tags

If you are using the jquery.ui.autocomplete.jstry this instead

如果您使用的是jquery.ui.autocomplete.jstry this

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

if not, use the jquery.ui.autocomplete.jsand see if it'll work

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

If that doesn't apply, I don't know how to help you bro

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

回答by Dan

jQuery UI autocomplete function automatically adds the class "ui-autocomplete-input" to the element. I'd recommend live binding the element on focus without the "ui-autocomplete-input" class to prevent re-binding on every keydown event within that element.

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

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

Edit

编辑

My answer is now out of date since jQuery 1.7, see Nathan Strutz's comment for use with the new .on()syntax.

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

回答by karim79

Just to add, you can use the .livequeryplugin for this:

只是补充一下，您可以.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);
});

回答by Electric Sheep

To get autocomplete working when loaded dynamically for the on()event used in jQuery > 1.7, using the syntax Nathan Strutz provides in his comment:

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

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

where .my-fieldis a selector for your autocomplete input element.

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

回答by Rehan Anis

.live() does not work with focus. also keyup.autocmplete does not make any sense. Instead the thing I have tried and working is this

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

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

This works perfectly fine.

这工作得很好。

回答by ysth

You can't. .live() only supports actual JavaScript events, not any custom event. This is a fundamental limitation of how .live() works.

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

回答by None

After reading and testing everyone else's answers I have updated it for the current version of JQuery and made a few tweaks.

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

The problem with using keydown as the event that calls .autocomplete()is that it fails to autocomplete for that first letter typed. Using focus is the better choice.

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

Another thing I have noticed is that all of the given solutions result in .autocomplete()being called multiple times. If you are adding an element dynamically to the page that will not be removed again, the event should only be fired once. Even if the item is to be removed and added again, the event should be removed and then added back each time the element is removed or added so that focusing on the field again will not unnecessarily call .autocomplete()every time.

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

My final code is as follows:

我的最终代码如下：

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

回答by arthurmarcels

You can try using this:

你可以尝试使用这个：

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

回答by Nicklas

This works for me:

这对我有用：

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

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

  });
});

回答by Andi

I just noticed you edited your post with this answer. It was obvious to me so I'm posting it below for others. Thank you.

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

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