Question

I have two jQuery UI auto-completes on the same page and I’d like to make the code more “functional” and terse. My background is almost strictly OO and I’d like to get more serious about writing more functional JavaScript.

Both of these functions are properties of an object literal that I’m using to namespace the functions on the page. Right now there is a lot of code that’s repeated between the functions and I’d like to use something similar to the “partial application” pattern to reduce the code.

autocomplete 1:

initProject : function(){
    var selected = 0;
    var suggestions = []; 
    var projs;
    var len;

    $("#projectNum").autocomplete({
        source : function(req, add){
            $.getJSON("projectList.do?method=viewProjectListJSON&contractID=" + req.term, function(data){
                //clear the suggestions array
                suggestions = [];

                projs = data[0];

                len = projs.length;

                for(var i = 0; i < len; i++){
                    suggestions.push(projs[i][1]);
                };
                add(suggestions);   

            });//end getjson callback
        }, 

        minLength : 2,

        select : function(){
            thisval = $(this).val();

            for(var i = 0;i < len; i++){

                if(thisval === projs[i][1]){
                    $("#projectID").val(projs[i][0]);
                    return;
                }   
            }
        }
    })
},

autocomplete 2:

initCAU : function(){
    var selected = 0;
    var suggestions = [];
    var caus;
    var len;
    $("#cauNum").autocomplete({
        source : function(req, add){
            $.getJSON("cauList.do?method=viewCAUListJSON&cauNumber=" + req.term, function(data){
                suggestions = [];

                caus = data[0];
                len = caus.length;

                for(var i = 0; i < len; i++){
                    suggestions.push(caus[i][1].toString());
                };
                add(suggestions);   
            }); //end getjson callback
        }, 

        minLength : 2,

        select : function(){
            thisval = $(this).val();

            for(var i = 0;i < len; i++){

                if(parseInt(thisval,10) === caus[i][1]){
                    $("#cauID").val(caus[i][0]);
                    return;
                }   
            } 
        }
    })
},

Answer 1

//factored-out common code...
var autocompleter = function(urlPrefix, fragment) {
  var selected = 0;
  var suggestions = [];
  var items;
  var len;
  return ({
    minLength: 2,
    source: function(req, add) {
      $.getJSON(urlPrefix + req.term, function(data) {
          suggestions = [];
          items = data[0];
          len = items.length;
          for(var i = 0; i < len; i++) {
            suggestions.push(projs[i][1]);
          };
          add(suggestions);
        }); //end JSON callback
    }, //end source callback
    select: function() {
      var thisVal = $(this).val();
      for(var i = 0; i < len; i++) {
        if(thisVal === items[i][1]) {
          $(fragment).val(items[i][0]);
          return;
        }
      }
    } //end select callback
  });
};

//verbose but clear way to achieve what you were doing before.
var initCAU = function() {
  var attachTo = "#cauNum";
  var urlPrefix = "cauList.do?method=viewCAUListJSON&cauNumber=";
  var fragment = "#cauID";
  $(attachTo).autocomplete(autocompleter(urlPrefix, fragment));
};

var initProject = function() {
  var attachTo = "#projectNum";
  var urlPrefix = "projectList.do?method=viewProjectListJSON&contractID=";
  var fragment = "#projectID";
  $(attachTo).autocomplete(autocompleter(urlPrefix, fragment));
};