Get ID of element in jQuery autocomplete source function

Question

I have a webservice method that takes the id of an element to determine the source for autocompletes.

In a nutshell, I'm doing this:

$("input[type='text']").autocomplete({
    source: function(request, response) {
        var id = $(this).attr('id');
        var params = {'id': id, 'term': request.term};
        var jsonParams = JSON.stringify(params);
        $.ajax({
            type: "POST",
            url: "Page.aspx/GetAutoCompleteList",
            data: jsonParams,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(msg) {
                response(JSON.parse(msg.d));
            },
            error: function() {
                response([]);
            }
        });
    }
});

But id isn't referring to the original selector.

What can I do to get the id of the selected input element? Or what is a better strategy for this?

Answer 1

Try

$(this.element).prop("id");

this.element[0].id;

$(this.element.get(0)).attr('id');

JSFIDDLE

$("input[type='text']").autocomplete({
    source: function(request, response) {
        var id = $(this.element).prop("id");
        var id2=this.element[0].id;
        var id3=$(this.element.get(0)).attr('id');
        console.log(id);
        console.log(id2);
        console.log(id3);
        var params = {'id': id, 'term': request.term};
        var jsonParams = JSON.stringify(params);
        $.ajax({
            type: "POST",
            url: "Page.aspx/GetAutoCompleteList",
            data: jsonParams,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(msg) {
                response(JSON.parse(msg.d));
            },
            error: function() {
                response([]);
            }
        });
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<input type="text" id="asd"></input>

Answer 2

You'd need to maintain a context of each input element, something like this:

$("input[type='text']").each(function (i, ele) {
    ele = $(ele);
    ele.autocomplete({
        source: function (request, response) {
            var id = ele.attr('id');
            var params = {'id': id, 'term': request.term};
            var jsonParams = JSON.stringify(params);
            $.ajax({
                type: "POST",
                url: "Page.aspx/GetAutoCompleteList",
                data: jsonParams,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    // ...
                },
                error: function () {
                    // ...
                },
                async: false
            });
        }
    });
});