优化jQuery函数

时间:2014-04-08 21:59:41

标签: javascript jquery arrays optimization

我在下面的代码中有几个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);

1 个答案:

答案 0 :(得分: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 ready

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

这相当于

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

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