Bind jQuery autocomplete UI using .live ()

Question

I searched everywhere, but I can not find any help ...

I have several text fields that are dynamically created through JS, so I need to bind all their classes to autocomplete. As a result, I need to use the new .live () parameter.

As an example, we can associate all elements with the .foo class now and in the future:

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

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

This does not work:

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

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

UPDATE

Found this out with Framer:

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

Answer 1

If you use jquery.ui.autocomplete.js try this instead

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

if not, use jquery.ui.autocomplete.js and see if it works

If this is not applicable, I do not know how to help you bro

Answer 2

The jQuery UI autocomplete function automatically adds the class "ui-autocomplete-input" to the element. I would recommend living the binding of an element to focus without the "ui-autocomplete-input" class to prevent re-binding to each keydown event inside that element.

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

Edit

My answer is now deprecated with jQuery 1.7, see Nathan Strutz comment for use with the new .on() syntax.

Answer 3

To add, you can use the .livequery plugin:

 $('.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

To make autocomplete work when dynamically loading the on() event used in jQuery> 1.7 using syntax, Nathan Strutz gives in his comment:

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

where .my-field is the selector for your autocomplete input element.

Answer 5

.live () does not work with focus. also keyup.autocmplete makes no sense. Instead, I tried and work, it’s

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

It works great.

Answer 6

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

Answer 7

You can try:

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

Answer 8

After reading and testing all the other answers, I updated it for the current version of jQuery and made a few settings.

The problem with using keydown as the event that calls .autocomplete() is that it cannot autocomplete this first letter. Using focus is the best choice.

Another thing that I noticed is that all of these solutions cause .autocomplete() called multiple times. If you add an item dynamically to a page that will not be deleted again, the event should only fire once. Even if the element needs to be deleted and added again, the event must be deleted and then added back each time the element is deleted or added, so focusing on the field again will not unnecessarily call .autocomplete() every time.

My last code is as follows:

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

Answer 9

autocomplete is not an event, but a function that allows you to use the autocomplete functions for a text field.

So, if you can change js, which dynamically creates text fields, to wrap the textbox element as a jquery object and cause this object to autocomplete.

Answer 10

I just noticed that you edited your post with this answer. This was obvious to me, so I post it below for others. Thank.

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

Answer 11

This works for me:

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

Answer 12

You can simply enable autocomplete inside the input event, for example:

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