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