使用 jquery 的 javascript 闭包自动完成答案

【问题标题】：autocomplete using a javascript closure using jquery使用 jquery 的 javascript 闭包自动完成
【发布时间】：2012-02-06 12:31:35
【问题描述】：

我需要一个 jquery 自动完成功能，它只调用一次服务器然后在本地存储并在 jqgrid 的后续调用中使用返回的数组。它也应该在其他自动完成的网格之外工作；我的 onload 中有一个 jquery 函数：

$('#text').myAutocomplete({url:'...'});

jqgrid 中的另一个 - 下面的 dataInit 是一个回调，它使用文本框参数以其他方式自动完成/修改我正在使用 asp.net Web 服务，因此在我的 ajax 调用中使用 msg.d

$('#table').jqGrid({
  ...,
  colModel:[...,
           name:'col1',...,dataInit:function(el){
                       $.myAutocomplete({url:'..',elem:el});
                       }
           ...],
  ...
});

然后在我的自动完成功能中：

(function($){
 var returnArray = [];
 $.fn.myAutocomplete = function(options){
   var element = options.elem || this;
   if(returnArray.length === 0){ //checking if the local array is populated or not
     $.ajax({ // all other ajax options for asp.net webservice to respond are also set here
     ...,
     url: options.url,
     success : function(msg){
                returnArray = msg.d;
               }
     });
    }
  return element.autocomplete({source:returnArray}); 
  }
})(jQuery);

问题是“文本”上的自动完成功能不起作用 - 我明天将在工作中测试 jqgrid 自动完成功能

【问题讨论】：

刚刚意识到我对我的函数的所有调用都使用相同的数组 - 这显然是有缺陷的，因为我需要对不同的 url 进行不同的调用来返回不同的数组
chohi ~ 正确，尽管这可能不是您的主要潜在问题。在任何情况下，通过将您的 returnArray 声明放入您的 $.fn.myAutocomplete 正文中，这很容易解决。无论如何，由于我在您的代码中看到了对 element.autocomplete 的调用，我假设您正在从 jQuery UI 加载自动完成功能？

标签： javascript jquery jquery-plugins autocomplete closures

【解决方案1】：

/*决定改变做法；写了以下代码
调用我的自动完成文本框 */

$('#textbox').txtAc({url:txtUrl});

//从jqgrid中的回调调用自动完成

dataInit:function(elem){
var gridArray;
var gridAc = $.getMyGridAc();
gridArray = gridAc.getStoredArray();
elem.autocomplete({source:gridArray});
};

//其中插件/功能有：

(function($){
  $.myAc = function(options){
   var storedArray = [];

   $.fillStoredArray = function(){
     $.ajax({url:options.url,
             ...,
             success:function(msg){
                     storedArray = msg.d;
                     if(options.el){
                         options.el.autocomplete({source:storedArray}); //1st time called, call jquery ui autocomplete from the ajax call if the element was specified (textbox); grid cant specify element in advance
                        }
                     }
     });
   }
   return {
     getStoredArray :function(){
                       if (storedArray.length === 0){
                       $.fillStoredArray();
                     }
      return storedArray;
           }
  }
 }
})(jQuery);

/*现在我可以开始重用我的插件 - 下面是 jqgrid 调用，然后是常规文本框 jqgrid 自动完成：

对于 jqgrid，首先从 $.myAc 创建并返回一个闭包实例：

(function($){
   $.prepareGridForAc = function(){
      var myGridAc = $.myAc({url:gridUrl});
      return function getMyGridAc (){
        return myGridAc;
      } 
   }
})(jQuery);

//当用户第一次加载网格时（或激活网格所在的选项卡）- 调用 prepareGridForAc

//
$.prepareGridforAc();
//

//文本框自动补全：

(function($){
  $.fn.txtAc = function(options){
    var myTxtAc ;
    var acArray;
    $.extend(options,el:this);
    myTxtAc = $.myAc(options);
    acArray = myTxtAc.getStoredArray();
    return this.autocomplete({source:acArray});
  }
})(jQuery);

【讨论】：