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

Question

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

score 36 · Answer 1 · answered Oct 23 '14 at 07:38

36

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

answered Oct 23 '14 at 07:38

Nazareno Lorenzo

1,069
2
14
25

1

Thanks this is what I needed too. It is particularly useful when you want to pass the autocomplete input field's attribute(s) as parameters to your target lookup script. – Kosta Kontos Dec 31 '16 at 10:05
The queried value actually resides in `request.term`. At least I use this all the time. – silkfire Nov 04 '17 at 15:41
Good support, by the way where is the documentation. – Abbas May 08 '18 at 12:31

score 13 · Accepted Answer · answered Oct 09 '12 at 21:43

13

Try using $(this)

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

answered Oct 09 '12 at 21:43

Adil

146,340
25
209
204

Thanks, that's it! I was trying $(this).name wondering why it is undefined. :) – Nikola Obreshkov Oct 09 '12 at 21:47

Ricardo Alvaro Lohmann · Answer 3 · 2012-10-09T21:51:36.927

4

You can use $(this) or event.target.

Then you can get the name using $(this).prop('name') or event.target.name.

demo

edited Oct 09 '12 at 21:51

answered Oct 09 '12 at 21:46

Ricardo Alvaro Lohmann

26,031
7
82
82

+1 For the event.target. Was a bit skeptical about using $(this) (closure and such). But both work and event.target is new information for me. – Awemo Apr 17 '13 at 15:55

score 3 · Answer 4 · answered Oct 09 '12 at 21:45

3

Use $(this)

 select: function(event, ui) {
        $(this).attr('name');
    }

answered Oct 09 '12 at 21:45

Sushanth --

55,259
9
66
105

score 3 · Answer 5 · answered Oct 09 '12 at 22:05

3

As far as I can tell for this example, you wouldn't need the $(). this would work just fine since name is a defined attribute.

this.name

answered Oct 09 '12 at 22:05

Chase

29,019
1
49
48

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

5 Answers5

Linked