jquery - 如何在 jQuery 插件中拥有成员变量和公共(public)方法？

Question

我正在尝试创建一个 jQuery 插件，它将创建类似 autoCompleteBox 的东西，但具有自定义功能。如何存储每个匹配的 jQuery 元素的成员变量？

例如，我需要为每个存储一个计时器ID。我还想存储对构成控件的一些 DOM 元素的引用。

我希望能够创建一个公共(public)方法，其工作原理如下:

$("#myCtrl").autoCompleteEx.addItem("1");

但是在 addItem() 的实现中，我如何访问该特定对象的成员变量，例如它的 timeID 或其他什么？

以下是我到目前为止所拥有的...

感谢您的帮助或建议!

(function($)
{     
    //Attach this new method to jQuery   
    $.fn.autoCompleteEx = function(options)
    {    
        //Merge Given Options W/ Defaults, But Don't Alter Either
        var opts = $.extend({}, $.fn.autoCompleteEx.defaults, options);


        //Iterate over the current set of matched elements   
        return this.each(function() 
        {
            var acx = $(this); //Get JQuery Version Of Element (Should Be Div)

            //Give Div Correct Class & Add <ul> w/ input item to it
            acx.addClass("autoCompleteEx"); 
            acx.html("<ul><li class=\"input\"><input type=\"text\"/></li></ul>");

            //Grab Input As JQ Object
            var input = $("input", acx);

            //Wireup Div
            acx.click(function()
            {
                input.focus().val( input.val() );
            });


            //Wireup Input
            input.keydown(function(e)
            {
                var kc = e.keyCode;
                if(kc == 13)   //Enter
                {

                }
                else if(kc == 27)  //Esc
                {

                }
                else
                {
                    //Resize TextArea To Input
                    var width = 50 + (_txtArea.val().length*10);
                    _txtArea.css("width", width+"px");    
                }
            });

        });   //End Each JQ Element

    }; //End autoCompleteEx()

    //Private Functions
    function junk()
    {

    };

    //Public Functions
    $.fn.autoCompleteEx.addItem = function(id,txt)
    {
        var x = this;
        var y = 0;
    };

    //Default Settings
    $.fn.autoCompleteEx.defaults =
    {
        minChars:  2,
        delay:     300,
        maxItems:  1
    };

    //End Of Closure
})(jQuery); 

Answer 1

我发现处理这个问题的 jQuery UI 方式似乎是最好的。您创建“额外方法”作为插件的字符串参数:

$('#elem').autoCompleteEx('addItem', '1');

然后保留“this”上下文，您可以按照以下方式执行操作:

function addItem() {
  // this should be == jquery object when this get called
}

$.fn.autoCompleteEx = function(options) {
   if (options === 'addItem') {
     return addItem.apply(this, Array.prototype.splice.call(arguments, 1));
   }
};