Bind jQuery UI autocomplete using .live()

Question

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

As an update, live() is deprecated, now on() is used to do this, like: $(document).on("keyup.autocomplete", '.autocomplete', function(){ $(this).autocomplete({ ... }); })... — devdRew
– devdRew, Commented May 10, 2012 at 8:03
Is there any way to achieve this behavior without calling the autocomplete method for every element added, instead calling the autocomplete method once and only once? — Russell Horwood
– Russell Horwood, Commented Nov 27, 2013 at 15:37

Dan · Accepted Answer · 2012-11-01 00:29:32Z

70

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.

edited Nov 1, 2012 at 0:29

answered May 31, 2011 at 21:30

Dan

7011 gold badge5 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Zephyr Over a year ago

This is the correct answer. Binding on keyup does not seem to bind for the very first keystroke. Very clever thinking. Thanks.

Nathan Strutz Over a year ago

I adapted this to work with the datepicker and updated it to use the newer on() syntax. Here's my code (sorry for the lack of formatting):

$(document).on("focus", ".dateField:not(.ui-datepicker-input)", function(event) {   $(this).datepicker({dateFormat:"mm/dd/yy"}); });

Atomox Over a year ago

@NathanStrutz You just saved me! When you do an AJAX refresh of form elements in Drupal 7, your code is the only thing which still worked! Thanks!

ucefkh Over a year ago

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

hackingchemist Over a year ago

This is brilliant, I was concerned the autocomplete would be bound more than once. Your answer removes my concerns :)

Famver Tags · Accepted Answer · 2010-12-29 03:30:01Z

18

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

answered Dec 29, 2010 at 3:30

Famver Tags

1,9982 gold badges16 silver badges18 bronze badges

3 Comments

sethvargo Over a year ago

I am using ui.autocomplete, and you binding works :). I can trigger an alert... but that doesn't actually make it an autocomplete... If i try what I've updated in my answer, I get syntax errors...

mynameistechno Over a year ago

This doesn't make any sense to me. autocomplete still hasn't been added to the new element yet so you can't bind to any events it generates. the correct answer is the one below by Dan.

Marecky Over a year ago

This answer is garbled, here is correct answer that should be accepted stackoverflow.com/a/6193792/340142

karim79 · Accepted Answer · 2010-12-29 03:42:50Z

9

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

answered Dec 29, 2010 at 3:42

karim79

343k67 gold badges420 silver badges409 bronze badges

2 Comments

workdreamer Over a year ago

This is the best, and ever coolest plugin i ever found! This will works also with datepicker i suppose! I was searching for this since i work with jquery... I can only vote up one time.... my bad...

GusDeCooL Over a year ago

Very Recommended Plugin, this will remove your headache

Electric Sheep · Accepted Answer · 2013-07-26 12:13:13Z

8

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.

edited Jul 26, 2013 at 12:13

answered Jul 25, 2013 at 16:24

Electric Sheep

4,4201 gold badge31 silver badges40 bronze badges

Comments

Rehan Anis · Accepted Answer · 2011-07-07 20:23:48Z

5

.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.

answered Jul 7, 2011 at 20:23

Rehan Anis

591 silver badge1 bronze badge

Comments

ysth · Accepted Answer · 2010-12-29 03:27:55Z

3

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

answered Dec 29, 2010 at 3:27

ysth

99.1k6 gold badges126 silver badges219 bronze badges

Comments

nbrooks · Accepted Answer · 2012-10-07 10:28:55Z

2

You can try using this:

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

edited Oct 7, 2012 at 10:28

nbrooks

18.2k5 gold badges58 silver badges68 bronze badges

answered Jan 12, 2012 at 14:24

arthurmarcels

211 bronze badge

Comments

None · Accepted Answer · 2013-02-28 19:55:14Z

2

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

answered Feb 28, 2013 at 19:55

None

5,6911 gold badge43 silver badges53 bronze badges

2 Comments

Russell Horwood Over a year ago

This is the best answer I've seen but still not what I was looking for. I thought the point of the 'on' method was that you bind to the nearest parent that you know WON'T get replaced so you only ever bind once. Here you are one time binding to a function that binds the autocomplete every time new elements are added. Doesn't this miss the point a little bit? I.e. the autocomplete binding is being run every time new input elements are added instead of just once.

None Over a year ago

You are correct about on(), but autocomplete is not an event. Each time the element is replaced the autocomplete function needs to be called on that element again. You could implement it so that calling autocomplete is part of replacing the element or you could set up an event listener that automatically calls autocomplete when you focus on any element that has the "autocomplete" class. One way or another autocomplete needs to be called every time the element is replaced. I am open to other people's solutions and I hope the jQuery team addresses this drawback in a future release.

Chandu · Accepted Answer · 2010-12-29 03:27:49Z

1

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.

answered Dec 29, 2010 at 3:27

Chandu

83.2k19 gold badges136 silver badges136 bronze badges

Comments

Andi · Accepted Answer · 2011-04-01 00:25:44Z

1

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

answered Apr 1, 2011 at 0:25

Andi

3,7571 gold badge22 silver badges12 bronze badges

1 Comment

None Over a year ago

This turns .search elements into an autocompleting element after a key is pressed. Autocompletion should be working BEFORE any key is pressed and it should only be initialized once instead of after each keyup event.

Nicklas · Accepted Answer · 2012-02-16 01:11:06Z

1

This works for me:

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

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

  });
});

answered Feb 16, 2012 at 1:11

Nicklas

394 bronze badges

Comments

Josh · Accepted Answer · 2017-06-13 16:41:28Z

0

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

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

});

edited Jun 13, 2017 at 16:41

user7605325

answered Jun 13, 2017 at 16:22

Josh

6687 silver badges14 bronze badges

Collectives™ on Stack Overflow

Bind jQuery UI autocomplete using .live()

12 Answers 12

5 Comments

3 Comments

2 Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

5 Comments

3 Comments

2 Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related