Can't get $(this) working in jQueryUI autocomplete

Question

I'm trying to create a generic autocomplete script using jQueryUI. The autocomplete should work for every:

<input type='text' class='autocomplete' id='foo'/> <input type='text' class='autocomplete' id='bar'/> ... 

Now I'm trying to access 'foo' or 'bar' in the source function using $(this), but when alerting I always get 'undefined'.

$('input.autocomplete').autocomplete({     source: function(req, add){         var id = $(this).attr('id');         alert(id);     } }); 

What am I doing wrong?

Answer 1

Setup autocomplete separately for each item in your selection, using a closure to hold a reference to the relevant element. Something like the following:

$('input.autocomplete').each(function(i, el) {     el = $(el);     el.autocomplete({         source: function(req, add) {             var id = el.attr('id');             alert(id);         }     }); }); 

---

Alternative (edit)

I don't see why there is such resistance to using each(): it works, the code is very clear and readable, and it introduces no issues with efficiency; but if you're determined to avoid each(), here's an alternative...

*PLEASE NOTE: the following approach relies (a little bit) on the internals of jQuery Autocomplete, so I'd recommend the first option... but the choice is yours.

$('input.autocomplete').autocomplete({         source: function(req, add) {             var id = this.element.attr('id');             alert(id);         }     }); }); 

That will work, at least until/unless they change the way the source() function is called from within the autocomplete plugin.

So, you have two options... something for everyone.