jquery ui自动完成多个“响应”方法

问题描述：

让我们看看我能否解释得很好......我有一个函数为我的autocompletes（minLength，delay，close，response ...）设置常用选项。但是我的一个autocompletes需要在响应方法上做一些额外的工作。我怎样才能执行“原始共同响应功能”和额外的工作？有没有可能扩展小部件？jquery ui自动完成多个“响应”方法

function attachAutocomplete_Common(arControlIds) { 
    $.each(arControlIds, function (i, control) { 
     $("#" + control).autocomplete({ 
      minLength: 3, 
      delay: 800, 
      autoFocus: true, 
      focus: function (event, ui) { 
       $(this).val(ui.item.label); 
       return false; 
      }, 
      response: function (event, ui) { 
       if (ui.content != null && ui.content.length === 1) { 
        $(this).data("ui-autocomplete").term = null; 
        $(this).data("ui-autocomplete")._trigger("select", "autocompleteselect", { item: ui.content[0] }); 
        $(this).autocomplete("close"); 
       } 
      } 
     }); 
    }); 
} 

$(document).ready(function() { 
    attachAutocomplete_Common(["cmbCountry", "cmbCity", "cmZipCode"]); 

    $("#cmZipCode").autocomplete({ 
     response: function (event, ui) { 
      [execute common response function]; 
      doSomeExtraWork(); 
     } 
    }); 
});

答

基于Risadinha的答案我做到了。尝试访问“commonResponse”功能中的“this”时发生错误。这是工作代码。

var commonResponse = function (event, ui, $ctl) { 
    if (ui.content != null && ui.content.length === 1) { 
     var $self = $ctl || $(this); 

     $self.data("ui-autocomplete").term = null; 
     $self.data("ui-autocomplete")._trigger("select", "autocompleteselect", { item: ui.content[0] }); 
     $self.autocomplete("close"); 
    } 
}; 

function attachAutocomplete_Common(arControlIds) { 
    $.each(arControlIds, function (i, control) { 
     $("#" + control).autocomplete({ 
       // ommitted, see above 
      }, 
      response: commonResponse 
     }); 
    }); 
} 

$(document).ready(function() { 
    attachAutocomplete_Common(["cmbCountry", "cmbCity", "cmbZipCode"]); 

    $("#cmbZipCode").autocomplete({ 
     response: function (event, ui) { 
      commonResponse(event, ui, $(this)); 
      doSomeExtraWork(); 
     } 
    }); 
});

答

将通用代码放到它自己的函数中，在小部件之外。然后从两个位置称之为 - 从response内attachAutocomplete_Common并从#cmZipCode之一：

var commonResponse = function (event, ui) { 
    if (ui.content != null && ui.content.length === 1) { 
     $(this).data("ui-autocomplete").term = null; 
     $(this).data("ui-autocomplete")._trigger("select", "autocompleteselect", { item: ui.content[0] }); 
     $(this).autocomplete("close"); 
    } 
}; 

function attachAutocomplete_Common(arControlIds) { 
    $.each(arControlIds, function (i, control) { 
     $("#" + control).autocomplete({ 
       // ommitted, see above 
      }, 
      response: commonResponse.bind(this) 
     }); 
    }); 
} 

$(document).ready(function() { 
    attachAutocomplete_Common(["cmbCountry", "cmbCity", "cmZipCode"]); 

    $("#cmZipCode").autocomplete({ 
     response: function (event, ui) { 
      commonResponse.bind(this)(event, ui); 
      doSomeExtraWork(); 
     } 
    }); 
});

编辑：作用域问题：要么就像对方的回答，或通过结合。我更新了代码。我没有试过是否在如图所示的each循环中绑定函数就足够了。

jquery ui自动完成多个“响应”方法

相关推荐