Question

I am using jqueryui autocomplete. I want to bind autocomplete to various selectors but success, source etc of autocomplete functions need to be customized for different selectors.

//Define execute function for birds
//Define execute function for turtles
        $( "#birds,#turtles" ).autocomplete({
          source: "search.php",
          minLength: 2,
          select: function( event, ui ) {
            this.execute();
            /*based on selector id execute() will call the 
              right function attached with the selector
              if called by birds
                call execute function of birds
              if called by turtles
                call execute function of turtles*/
          }
        });

So how can i attach customize function with various objects and let jquery select the appropriate source and customized function based on selector ?

Answer 1

Event.target will provide the DOM element that triggered the autocomplete.

    $( "#birds,#turtles" ).autocomplete({
      source: "search.php",
      minLength: 2,
      select: function( event, ui ) {
        this.execute();
        autocomplete(event, ui);
      }
    });

function autocomplete(event, ui){
     if(event.target.id == "birds"){
       //dothis();
     }else if(event.target.id == "turtles"){
       //dothat();
     }
}

Another Option

If you wanted a more sophisticated solution you could create a factory like object. Such as:

var completions = {
   turtles: function(){
     //Do this
   },
   birds: function(){
     //Do that
   }
};

Then use this object in the function bound to the select, using the id as a key.

   $( "#birds,#turtles" ).autocomplete({
      source: "search.php",
      minLength: 2,
      select: function( event, ui ) {
        this.execute();
        completions[event.target.id]();
      }
    });