Question

我正在尝试扩展默认的jQuery UI 1.8.16自动完成插件来做一些事情：

检查一组值，而不仅仅是搜索匹配时的标签/值
根据项目

为此，我开始研究代码。我是一个非常新的小工具/插件，所以我想知道是否有人可以帮我理解这一部分。我目前正在尝试执行以下操作：

   $.widget("custom.advautocomplete", $.ui.autocomplete, {
            filter: function (array, term) {

                var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i");
                return $.grep(array, function (value) {
                    return matcher.test(value.label || value.alldata || value);
                });
            },

            _renderMenu: function (ul, items) {

                var self = this,
                                currentCat = "";

                $.each(items, function (index, item) {

                    if (currentCat != item.category) {
                        ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
                        currentCat = item.category;
                    }

                    self._renderItem(ul, item);
                });
            },

            _renderItem: function (ul, item) {
                return $("<li></li>")
                            .data("item.autocomplete", item)
                            .append($("<a></a>").text(item.alldata))
                            .appendTo(ul);
            }
        });

_renderMenu代码几乎直接来自文档中的示例。 _renderItem代码也在此示例中工作。什么是无效的是过滤器代码。我注意到过滤器代码是在jQuery库中定义的，如下所示：

$.extend($.ui.autocomplete, {
    escapeRegex: function (value) {
        return value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
    },
    filter: function (array, term) {
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i");
        return $.grep(array, function (value) {
            return matcher.test(value.label || value.value || value);
        });
    }
});

从我到目前为止收集的内容来看，这是通过调用jQuery autocomplete来扩展先前定义的$.widget("ui.autocomplete"...但是为什么这样处理呢？为什么这两个函数不像其他所有内容一样在窗口小部件定义中处理？我注意到如果我以与基本小部件相同的方式扩展ui.autocomplete，那么我可以使过滤器覆盖工作。我想扩展控件并同时包含新的过滤器，这样我可以保持我的代码更清洁，但我不明白为什么这样做。我缺少一个好处吗？

jQuery扩展了jQuery UI自动完成

0 个答案: