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.