Question

I’ve got the following (partial) code:

$("#input1, #input2").autocomplete({
   source:function( request, response ) { 
     ...
   }, ...);

Ok, I want to know how can I know which is the selector active, input1 or input2, inside the source option. I’ve tried with $(this).attr(“id”), but it throws undefined.

Edition: in the “select:” option, $(this).attr(“id”) works fine.

Answer 1

As you’re using the jQuery UI autocompleter, you can get the element from the undocumented element property on the autocompleter instance:

source: function(request, response) {
  if (this.element && this.element[0]) {
    display("source triggered for #" + this.element[0].id);
  }
}

Live example

this.element is a jQuery wrapper for the element the autocompleter is attached to, so this.element[0] is the raw DOM element.

But using undocumented information is always risky, it can change or go away between dot releases. It would be more reliable to use a closure as suggested by SadullahCeran. I’d do it slightly differently:

$("#input1, #input2").each(function(){
  var $element = $(this); // `element` is a jQuery wrapper around the element
  $(element).autocomplete({
   source:function( request, response ) { 
     // get the options relevant to `element`
   });
});

…just because then you’re not relying on using an id value. But that’s a small point. And yes, the above does end up creating two function objects, but that’s not such a bad thing. If there’s a lot of code involved and you’re worried about having two copies of it in memory (which is almost certainly not an issue), just have the function call into another function:

$("#input1, #input2").each(function(){
  var $element = $(this); // `element` is a jQuery wrapper around the element
  $(element).autocomplete({
   source:function( request, response ) { 
     return getOptionsFor(element, request, response);
   });
});
function getOptionsFor(element, request, response) {
  // get the options for `element`
}