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?

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

回答2:

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

回答3:

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

回答4:

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.

来源：https://stackoverflow.com/questions/4299022/cant-get-this-working-in-jqueryui-autocomplete