Jquery options formatting

Question

I'm trying to format some jquery options, in this case for the autocomplete plugin. In my code I can get the following to work, however I am certain there is a more condensed/elegant way to format this...

      extraParams: {
        param_1: function(){
          var id = $(original).attr("id");
          var params = id.split("-");
          return params[0];
        },
        param_2: function(){
          var id = $(original).attr("id");
          var params = id.split("-");
          return params[1];
        },
        param_3: function(){
          var id = $(original).attr("id");
          var params = id.split("-");
          return params[2];
        },
        param_4: function(){
          var id = $(original).attr("id");
          var params = id.split("-");
          return params[3];
        },
      },

I've tried the following:

     extraParams: function(){
       var id = $(original).attr("id");
       var params = id.split("-");
       return {param_1: params[0], 
               param_2: params[1],
               param_3: params[2],
               param_4: params[3]};
     },

But no joy..

Ideally the code would support an unlimited # of params...

Any help is greatly appreciated.

score 1 · Answer 1 · answered Oct 10 '11 at 22:27

One way to do this might be to use a function that returns a closure with your param index:

// create a function to return the param function
function getParamFunction(i) {
    return function() {
        var id = $(original).attr("id"),
            params = id.split("-");
        return params[i];
    }
}

// now make your extraParams object
var extraParams = {};
// not sure how you want to configure this, but
// here's the "simple loop" option:
for (var i=0; i<4; i++) {
    extraParams['param_' + i] = getParamFunction(i);
}

Now you can set extraParams: extraParams in your options object.

But as @Andy notes, is there actually any reason these need to be functions? If you can configure this at the time you call .autocomplete(), that's probably the simpler option.

score 0 · Accepted Answer · answered Oct 10 '11 at 22:26

Can you do the splitting before the call?

var id = $(original).attr("id");
var params = id.split("-");
var myExtraParams = {param_1: params[0], 
                   param_2: params[1],
                   param_3: params[2],
                   param_4: params[3]};


   {
    extraparams:myExtraParams,
    ...
   }

score 0 · Answer 3 · edited May 23 '17 at 10:34

Thanks guys. Gonna check Andy's answer as the correct one, though both answers were invaluable. Turns out moving the param creation outside the autocomplete call was the key. nrabinowitz answer helped me make the function extendable...

Here's the final bit:

 $.editable.addInputType('autocomplete', {
  element : $.editable.types.text.element,
  plugin : function(settings, original) {

    // make the extraParams object
    var extraParams = {};
    var id = $(original).attr("id");
    var params = id.split("-");
    for (var i=0; i<params.length; i++) {
        extraParams['param_' + i] = params[i];
    }

    $('input', this).autocomplete(settings.autocomplete.data, {
      dataType:'json',
      // Using the extra params parameter
      // we can pass additional variables to the
      // autocomplete callback function.
      // for example data?q=et&param_1=1234.
      // in this case, by passing vendor_id
      extraParams: extraParams,
      parse: function(data) {
        return $.map(data, function(item){
          return {
            data: item,
            value : item.Key,
            result: item.value
          }
        })
      },
      formatItem: function(row, i, n) {
        return row.value;
      },
      mustMatch: false,
    });
}});

Fwiw, this code is for passing additional parameters to a jEditable + autocomplete field where the values for the autocomplete are pulled from a db. See Working example of jeditable and autocomplete working together

Below is how I get the jEditable/autocomplete field fired up:

 $(".cs-jeditable-autocomplete").editable("/path/to/jEditable_save_script", { 
    indicator : "<img src='images/indicator.gif'>",
    type      : "autocomplete",
    tooltip   : "Click to edit...",
    submit    : 'Save',
    //onblur    : "submit",
    style   : 'inherit',
    autocomplete : {
       data : '/path/to/autocomplete_data_script'
    }
});

In this case, we are able to pass additional parameters based on the id of the element containing a .cs-jeditable-autocomplete class to the script defined in the data option. For example:

<span id="hello-world" class=".cs-jeditable-autocomplete">click to edit</span>

This will pass additional params to /path/to/autocomplete_data_script so the actual call from a browser would look like:

/path/to/autocomplete_data_script?query=stuff_you_type&param_1=hello&param_2=world

Jquery options formatting

3 Answers3