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:

Answer 1

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