jQuery расширение автозаполнения jQuery UI - PullRequest
Новая
       26

jQuery расширение автозаполнения jQuery UI

3 голосов
/ 23 октября 2011

Я пытаюсь расширить плагин автозаполнения 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 так же, как это делает базовый виджет, тогда я могу заставить работать переопределение фильтра. Я хотел бы расширить контроль и одновременно включить новый фильтр, чтобы мой код был немного чище, но я не понимаю, почему это делается так. Есть ли польза, которую я упускаю?

...