Overloading methods of jqueryui widgets

Question

I'm fairly new to jquery/jqueryui, but I'm progressing fast. I have a lot of duplicated code, which there must be a way to refactor.

So for example I have a whole bunch of autocomplete widgets defined kind of like this one:

 $( "#workOrderSearchCustomer" )
    .autocomplete({
       source: function( request, response ) {
          $.getJSON( "/autocomplete/customers", {
             term: acExtractLast( request.term )
          }, response )
       },
       search: function() {
          // custom minLength
          var term = acExtractLast( this.value );
          if ( term.length < 2 ) {
             return false;
          }
       },
       focus: function() {
          // prevent value inserted on focus
          return false;
       },
       select: function( event, ui ) {
          var terms = acSplit( this.value );
          // remove the current input
          terms.pop();
          // add the selected item
          terms.push( ui.item.value );
          // add placeholder to get the comma-and-space at the end
          terms.push( "" );
          this.value = terms.join( ", " );

          // update the search
          searchAndReloadWorkorderTabs();
          return false;
       }
 });

They all use the same code except they change the call back function, and the location of the autocomplete content. In this case the things that change from widget to widget are just "/autocomplete/customers" and searchAndReloadWorkorderTabs()

I'd like to be able to do something like:

 $( "#workOrderSearchCustomer" )
    .autocomplete( initAutoComplete( 
       "autocomplete/customers", 
       searchAndReloadWorkorderTabs
    ));

And have this fill in all the methods only changing the two things that change, so I don't have to have all this duplicated code. What is the standard way of solving this?

Augustus Kling · Accepted Answer · 2012-09-29 21:12:48Z

1

You could introduce a function that is responsible of constructing the configuration object. It does basically the same as your code but takes your parameters from the function's closure. Invocation would be as presented in your question.

function initAutoComplete(endpointURI, callbackFunction){
   return {
       source: function( request, response ) {
          $.getJSON( endpointURI, {
             term: acExtractLast( request.term )
          }, response )
       },
       search: function() {
          // custom minLength
          var term = acExtractLast( this.value );
          if ( term.length < 2 ) {
             return false;
          }
       },
       focus: function() {
          // prevent value inserted on focus
          return false;
       },
       select: function( event, ui ) {
          var terms = acSplit( this.value );
          // remove the current input
          terms.pop();
          // add the selected item
          terms.push( ui.item.value );
          // add placeholder to get the comma-and-space at the end
          terms.push( "" );
          this.value = terms.join( ", " );

          // update the search
          callbackFunction();
          return false;
       }
    }
}

answered Sep 29, 2012 at 21:12

Augustus Kling

3,3331 gold badge24 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rafael Baptista Over a year ago

Works great! Javascript it the bomb. Its like any expression is possible.

Collectives™ on Stack Overflow

Overloading methods of jqueryui widgets

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related