CODEWITHSUNDEEP
bindingautocompletejquery
sethvargo
sethvargo

Reputation: 26997

Bind jQuery UI autocomplete using .live()

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.

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

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

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

This doesn't work:

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

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

UPDATE

Figured it out with Framer:

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

Upvotes: 65

Views: 39467

Answers (12)

Josh
Josh

Reputation: 668

You can just put the autocomplete inside input live event, like this:

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

});

Upvotes: 0

Electric Sheep
Electric Sheep

Reputation: 4320

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:

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

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

Upvotes: 8

None
None

Reputation: 5649

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

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.

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.

My final code is as follows:

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

Upvotes: 2

Dan
Dan

Reputation: 701

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.

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

Upvotes: 70

arthurmarcels
arthurmarcels

Reputation: 21

You can try using this:

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

Upvotes: 2

Nicklas
Nicklas

Reputation: 39

This works for me:

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

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

  });
});

Upvotes: 1

Rehan Anis
Rehan Anis

Reputation: 59

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

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

This works perfectly fine.

Upvotes: 5

Andi
Andi

Reputation: 3727

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' }); 
  });
});

Upvotes: 1

karim79
karim79

Reputation: 342635

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

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

Upvotes: 9

Famver Tags
Famver Tags

Reputation: 1998

If you are using the jquery.ui.autocomplete.js try this instead

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

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

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

Upvotes: 18

ysth
ysth

Reputation: 98388

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

Upvotes: 3

Chandu
Chandu

Reputation: 82893

autocomplete is not an event rather a function that enables autocomplete functionality for a textbox.

So if you can modify the js that creates the textboxes dynamically to wrap the textbox element in as a jquery object and call autocomplete on that object.

Upvotes: 1

Related Questions