デフォルトの 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"... 、なぜこれがこのように処理されるのですか? これら 2 つの関数が他のすべての関数と同様にウィジェット定義内で処理されないのはなぜですか? ui.autocomplete基本ウィジェットと同じ方法で拡張すると、フィルターのオーバーライドを機能させることができることに気付きました。コントロールを拡張し、同時に新しいフィルターを含めたいので、コードを少しきれいに保つことができますが、なぜこのように行われるのかわかりません。私が見逃しているメリットはありますか？