优化jQuery函数

Question

我在下面有几个 inputTextbox 的自动完成功能的代码。输入框也共享同一个类“.wikiInput”。当用户在其中任何一个中输入内容时，应该会出现一个相关的自动完成下拉框。而不是一一硬编码。如何使用数组或数组组将它们分组为一个？请注意，查找在不同页面中有不同的数组。并非每个页面都显示所有需要的数组。

    (function () {
        var cdTeamInput = $("#ctl00_ContentPlaceHolder1_txtAssociation");
        if (cdTeamInput.length > 0) {
            cdTeamInput.autocomplete({
                deferRequestBy: 0,
                autoSelectFirst: true,
                lookup: txtAssociation,
                onSelect: function (value, data) {
                    cdTeamInput.val(value.value);
                    $(".wikiSubmit").click();
                }
            });
        }
    })();

    (function () {
        var cdSubjectInput = $("#ctl00_ContentPlaceHolder1_txtSubject");
        if (cdSubjectInput.length > 0) {
            cdSubjectInput.autocomplete({
                deferRequestBy: 0,
                autoSelectFirst: true,
                lookup: txtSubject,
                onSelect: function (value, data) {
                    cdSubjectInput.val(value.value);
                    $(".wikiSubmit").click();
                }
            });
        }
    })();

---

到目前为止，我得到了但仍然不适用于跨页数组对象。控制台一直说我有未定义的变量，因为并非每个页面都有所有可用的数组。如果页面中不存在该功能，如何忽略该功能？ lookup.length>0 不适合我。

function initAutocomplete(selector, lookup) {
  $(selector).autocomplete({
    deferRequestBy: 0,
    autoSelectFirst: true,
    lookup: lookup,
    onSelect: function (value, data) {
      cdSubjectInput.val(value.value);
      $(".wikiSubmit").click();
    }
  });
}

initAutocomplete("#ctl00_ContentPlaceHolder1_txtAssociation", txtAssociation);
initAutocomplete("#ctl00_ContentPlaceHolder1_txtSubject", txtSubject);

Answer 1

为什么你不简单地添加这个：

if(!lookup) return;

或

if(typeof lookup === 'undefined') return;

喜欢这里

function initAutocomplete(selector) {

  if(!lookup) return;

  $(selector).autocomplete({
    deferRequestBy: 0,
    autoSelectFirst: true,
    lookup: lookup,
    onSelect: function (value, data) {
      cdSubjectInput.val(value.value);
      $(".wikiSubmit").click();
    }
  });
}

编辑

如果你这样做：

if(txtAssociation){
  //do something
}

如果您之前没有声明 txtAssociation，这将导致错误“未定义的变量”。

所以你需要在每个页面中声明所有这些变量：

var txtAssociation,txtSubject;

然后做这个

txtAssociation = ["v1","v2","v3"]; //Your array complete

现在当你这样做时：

if(txtAssociation){
  //do something
}

终于可以了，因为现在你有一个未定义但已声明的变量。

无论如何我建议你这样做：

<input id="ctl00_ContentPlaceHolder1_txtAssociation" data-autocomplete="txtAssociation">

你可以这样称呼它

function initAutocomplete(selector) {

  var lookup = window[$(selector).attr("data-autocomplete")];
  if(!lookup) return;
  $(selector).autocomplete({
    deferRequestBy: 0,
    autoSelectFirst: true,
    lookup: lookup,
    onSelect: function (value, data) {
      cdSubjectInput.val(value.value);
      $(".wikiSubmit").click();
    }
  });
}

如果将 txtAssociation 声明为全局变量，则此方法有效。

这不是自动完成的最佳实现，但无需更大的修改即可工作。

jQuery 就绪

$(function(){
    initAutocomplete("#ctl00_ContentPlaceHolder1_txtAssociation", txtAssociation);
});

这相当于

$(document).ready(function(){
    initAutocomplete("#ctl00_ContentPlaceHolder1_txtAssociation", txtAssociation);
});

您可以在文档完全加载后使用any来执行函数。