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

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.


To access that input element you should be able to do the following:

$(this.element).val();

Of course, that just gets the value. You can access the other attributes like so:

$(this.element).attr('value'); // just another way to get the value
$(this.element).attr('id');

Also, suppose you want to access that element in the select event, you can do that like so:

$(event.target).attr('value');
$(event.target).attr('id');