Question

嘿所有我有一个名为 searchableSelect 的插件，我试图添加一个功能，以便有希望在下拉框中清除所选值在页面上。

以下是该代码的一部分以及我添加的功能：

(function ($) {
    // a case insensitive jQuery :contains selector
    $.expr[":"].searchableSelectContains = $.expr.createPseudo(function (arg) {
        return function (elem) {
            return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
        };
    });

    $.searchableSelect = function (element, options) {
        this.element = element;
        this.options = options || {};
        this.init();

        var _this = this;

        this.searchableElement.click(function (event) {
            // event.stopPropagation();
            _this.show();
        }).on('keydown', function (event) {
            if (event.which === 13 || event.which === 40 || event.which == 38) {
                event.preventDefault();
                _this.show();
            }
        });

        $(document).on('click', null, function (event) {
            if (_this.searchableElement.has($(event.target)).length === 0)
                _this.hide();
        });

        this.input.on('keydown', function (event) {
            event.stopPropagation();
            if (event.which === 13) {         //enter
                event.preventDefault();
                _this.selectCurrentHoverItem();
                _this.hide();
            } else if (event.which == 27) { //ese
                _this.hide();
            } else if (event.which == 40) { //down
                _this.hoverNextItem();
            } else if (event.which == 38) { //up
                _this.hoverPreviousItem();
            }
        }).on('keyup', function (event) {
            if (event.which != 13 && event.which != 27 && event.which != 38 && event.which != 40) {
                if (_this.input[1].value != "") {
                    $('#ddHeader').slideUp('slow');
                } else {
                    $('#ddHeader').slideDown('slow');
                }
            }

            _this.filter();
        })
    }

    var $sS = $.searchableSelect;

    $sS.fn = $sS.prototype = {
        version: '0.0.1'
    };

    $sS.fn.extend = $sS.extend = $.extend;
    $sS.fn.extend({
        init: function () {
            [lots of code here]...
        },
        hoverFirstNotHideItem: function () {
            this.hoverItem(this.items.find('.searchable-select-item:not(.searchable-select-hide)').first());
        },
        testing: function () {
            alert(this);
        },
        show: function () {
            this.dropdown.removeClass('searchable-select-hide');
            this.input.focus();
            this.status = 'show';
            this.setPriviousAndNextVisibility();
        },
        hide: function () {
            if (!(this.status === 'show'))
                return;

            if (this.items.find(':not(.searchable-select-hide)').length === 0)
                this.input.val('');
            this.dropdown.addClass('searchable-select-hide');
            this.searchableElement.trigger('focus');
            this.status = 'hide';
        },
        [etc etc......]
    });

    $.fn.searchableSelect = function (options) {
        this.each(function () {
            var sS = new $sS($(this), options);
        });

        //Called here because it would not get the special select boxes
        //and change their color to requiered if it needs it.
        callAllReqInput(options);

        return this;
    };
})(jQuery);

我添加的功能是测试：部分，每当我调用该函数时都会触发一个警告框 - 但是，这不会发生。

我尝试了以下命令来关闭该功能：

$（ '＃NetworkAddress的'）。测试

$（ '＃NetworkAddress的'）。测试（）

$ sS.testing

$ sS.testing（）

$ sS.fn.testing（）

$ sS.fn.testing

$（ '＃NetworkAddress的'）。searchableSelect（）。测试（）

$（ '＃NetworkAddress的'）。searchableSelect（）。测试

$（ '＃NetworkAddress的'）。searchableSelect.testing（）

$（ '＃NetworkAddress的'）。searchableSelect.testing

这会产生未定义或错误。

我目前解雇实际 searchableSelect 的方式是这样的：

//Add search option to dropdown boxes
$('#networkaddress').searchableSelect({
});

我也尝试将上面的内容定义为这样的变量：

var blah = $('#networkaddress').searchableSelect({
            });

尝试这些电话：

Blah.testing（）

Blah.testing

产生与上述尝试相同的结果。

那么，我错过了什么？

不重复this question。

Answer 1

您想要做的事情的基础是

$.searchableSelect = function (element, options) {
    this.element = element;
    this.options = options || {};

    if(typeof this.options === 'string') {
        // where options is the name of our function
        this[options]();
        return;
    }

    this.init();

    var _this = this

    ...
}

然后将其称为

$('#networkaddress').searchableSelect('testing');

https://github.com/jnicol/jquery-plugin-boilerplate更好地证明了这一点，并且更加强大。

jQuery为插件添加函数

1 个答案: