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?

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

Literally this is the answer. not $('this') or $(this) just this

Example:

$(".peoplepicker").autocomplete({
    source: function (request, response) {
        var url = "/data/myResource";

        var thisControl = this.element; // <<---

        $.ajax({
            url: url,
            type: "GET",
            headers: {
                Accept: "application/json;odata=nometadata"
            },
            async: true,
            cache: false,
            beforeSend: function () {
                thisControl.parent().parent().find(".srchstat").hide();    // <<===
                thisControl.parent().parent().find(".searching").fadeIn(); // <<===
            },
... [snipped]

Using thisControl = this.element; you can act on the target control later in the scope of thisControl. Like this:

thisControl.css("color","red");

or

thisControl.parent().parent().find(".searching").fadeIn();

I hope this helps. fwiw: this is how I have it working in my production app.

/* I am using: */
/*! jQuery v3.3.1 
/*! jQuery UI - v1.12.1 - 2020-02-03

$(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.