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

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?

Answers


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

$(this) will come from your newly created function and thus not work. Move your id declaration above source and it should work.


Marwelin is correct. 'this' will reference the newly created function you are nested within. This is easily fixable by creating the var id outside the function and using it within the function.


Need Your Help

What do you use to Unit-Test your Web UI?

unit-testing user-interface selenium

The company I'm currently working for is using Selenium for Uniting-Testing our User Interface. What do you use to Unit-Test your Web UI and how effective do you find it?

Weather APIs For Android

android weather

I would like to know of some API which i could use to retrieve weather information in Android. I came across samples which make use of the Google Weather API and it works fine.But since the Google