How to get the input element triggering the jQuery autocomplete widget?

Nikola Obreshkov picture Nikola Obreshkov · Oct 9, 2012 · Viewed 17.2k times · Source

I have several input fields that are enhanced with jQuery auto-complete functionality. How to get the corresponding input field when a select event is triggered?

<input name="1" value="">
<input name="2" value="">
<input name="3" value="">

$('input[type=text]').autocomplete({
    source: 'suggestions.php',
    select: function(event, ui) {
        // here I need the input element that have triggered the event
    }
});

Answer

Nazareno Lorenzo picture Nazareno Lorenzo · Oct 23, 2014

I was using an anonymous function for the source param, and $(this) inside it referenced the funcion, not the element that was triggering it. I had to use $(this.element).

The final code ended similar to this (I simplified it for demo purposes):

$( ".regionsAutocomplete" ).autocomplete({
    source: function(request, response){

        //The next line is the important one for this example
        var input = this.element;
        $(input).css('color','red');

        var data = {'foo':'bar'};
        $.ajax({
            'url': ajaxurl,
            'data': data,
            'method': "POST",
            'dataType': "json",
            'success': function(data) {
                response(data);
            }
        });
    }
});