3

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

  1. 搜索匹配项时检查值数组，而不仅仅是标签/值
  2. 根据项目上的类别以不同的模式呈现菜单项

所以为了做到这一点，我开始研究代码。我对编写小部件/插件非常陌生，所以我想知道是否有人可以帮助我理解这部分。我目前正在尝试执行以下操作：

   $.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以与基本小部件相同的方式进行扩展，那么我可以让过滤器覆盖工作。我想扩展控件并同时包含新的过滤器，这样我可以让我的代码更干净一些，但我不明白为什么要这样做。有没有我错过的好处？

4

0 回答 0