Question

我正在尝试格式化一些jquery选项，在本例中是自动完成插件。在我的代码中，我可以得到以下工作，但我确信有一种更简洁/优雅的方式来格式化...

      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];
        },
      },

我尝试了以下内容：

     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]};
     },

但没有快乐..

理想情况下，代码会支持无限数量的参数...

非常感谢任何帮助。

Answer 1

执行此操作的一种方法可能是使用一个返回带有param索引的闭包的函数：

// 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);
}

现在，您可以在选项对象中设置extraParams: extraParams。

但正如@Andy指出的那样，这些功能实际上是否有任何原因？如果您可以在调用.autocomplete()时进行配置，那可能是更简单的选项。

Answer 2

你可以在通话前进行拆分吗？

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,
    ...
   }

Answer 3

谢谢你们。将安迪的答案视为正确答案，尽管这两个答案都非常宝贵。原来在自动完成调用之外移动param创建是关键。 nrabinowitz回答帮助我使功能可扩展...

这是最后一点：

 $.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，此代码用于将其他参数传递到jEditable + autocomplete字段，其中自动完成的值从db中提取。见Working example of jeditable and autocomplete working together

以下是我如何启动jEditable / autocomplete字段：

 $(".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'
    }
});

在这种情况下，我们可以根据包含.cs-jeditable-autocomplete类的元素的id将其他参数传递给data选项中定义的脚本。例如：

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

这会将额外的参数传递给/ path / to / autocomplete_data_script，因此来自浏览器的实际调用如下所示：

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

Jquery选项格式化

3 个答案: