Пользовательский интерфейс Jquery Autocomplete Custom HTML (элемент не определен) - PullRequest
Новая
       21

Пользовательский интерфейс Jquery Autocomplete Custom HTML (элемент не определен)

6 голосов
/ 05 февраля 2011

Я стучал головой по столу, пытаясь заставить автозаполнение пользовательского интерфейса jQuery выводить пользовательский HTML.Вот мой код. 

        $(document).ready(function(){

        $.widget( "custom.catcomplete", $.ui.autocomplete, {
            _renderMenu: function( ul, items ) {
                var self = this,
                    currentCategory = "";
                $.each( items, function( index, item ) {
                    if ( item.category != currentCategory ) {
                        ul.append( "<li class='ui-autocomplete-category'>" + item.category + "<ul class='autocomplete-category'></ul></li>" );
                        currentCategory = item.category;
                    }
                    self._renderItem( ul, item);
                });
            }
        });

        var data = [
            { label: "anders", category: "Antigen" },
            { label: "andreas", category: "Antigen" },
            { label: "antal", category: "Antigen" },
            { label: "annhhx10", category: "Products" },
            { label: "annk K12", category: "Products" },
            { label: "annttop C13", category: "Products" },
            { label: "anders andersson", category: "People" },
            { label: "andreas andersson", category: "People" },
            { label: "andreas johnson", category: "People" }
        ];

        $( "#typeAhead" ).catcomplete({
            delay: 0,
            source: data,
        })
        .data( "catcomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.catcomplete", item )
                .append( $( "<a class='ui-menu-item'></a>" ).text( item.label ) )
                .appendTo( $('ul').last('.autocomplete-category'));
        };
    });

Кажется, у меня проблемы с вложением моих списков в функцию renderItem.Вывод HTML именно так, как я хочу.Однако, когда я "нажимаю клавишу", я получаю ошибку javascript (элемент не определен).

Есть идеи или предложения?Я попробовал почти все.

1 Ответ

12 голосов
/ 05 февраля 2011

Вы были почти там!Я только сделал два изменения, чтобы заставить это работать ( Обновлено после комментариев от OP ):

После поиска в источнике автозаполнения jQueryUI, это похоже на основное менюиспользуемый виджетом автозаполнения не слишком дружелюбен к вложенным элементам.

Я могу ошибаться, но я думаю, что меню ожидает простого <ul> с только детьми <li> с тегом привязки.

Редактировать :Эта строка подтверждает мое подозрение о меню (находится в виджете меню jqueryUI 1.8.9): 

    var items = this.element.children("li:not(.ui-menu-item):has(a)")
        .addClass("ui-menu-item")
        .attr("role", "menuitem");

    items.children("a")
        .addClass("ui-corner-all")
        .attr("tabindex", -1)
        // mouseenter doesn't work with event delegation
        .mouseenter(function( event ) {
            self.activate( event, $(this).parent() );
        })
        .mouseleave(function() {
            self.deactivate();
        });

По сути, поскольку ваши теги a были похоронены во вложенном списке, они не были распознаныменю.

Могу поспорить, что вы заметили, что в исходном коде вы заметили, что элементы меню автозаполнения не выделялись при наведении на них курсора.Это выделение фактически совпадает с тем, какой элемент меню считает виджет активным, что приводило к сбою вашего виджета, когда пользователь выбирал элемент.

Поскольку нет ничего семантически неправильного или визуально неправильного, просто указав категорию liВ другом классе я бы перестроил меню виджета следующим образом:

JavaScript:

_renderItem Функция: 

.data( "catcomplete" )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( $( "<a class='ui-menu-item'></a>" )
                 .text( item.label ) )
        .appendTo(ul);
};

Ваш _renderMenu function: 

_renderMenu: function( ul, items ) {
    var self = this,
        currentCategory = "";
    $.each( items, function( index, item ) {
        if ( item.category != currentCategory ) {
            ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
            currentCategory = item.category;
        }
        self._renderItem( ul, item);
    });
}

Сгенерированный HTML для меню автозаполнения: 

<ul class="ui-autocomplete>
    <li class="ui-autocomplete-category">Antigen</li>
    <li class="ui-menu-item" role="menuitem">
         <a class="ui-menu-item ui-corner-all" tabindex="-1">anders</a>
    </li>
    <li class="ui-menu-item" role="menuitem">
        <a class="ui-menu-item ui-corner-all" tabindex="-1">andreas</a>
    </li>
    <li class="ui-menu-item" role="menuitem">
        <a class="ui-menu-item ui-corner-all" tabindex="-1">antal</a>
    </li>
    <!-- More categories, items, etc.-->
</ul>

Судя по вашим комментариям, вы хотели, чтобы HTML меню был вложенным ul с внутри li с для каждой категории.Дайте мне знать, если изменение HTML сгенерированного меню по какой-то причине вам не подходит.

Я обновил пример: http://jsfiddle.net/andrewwhitaker/pjs7a/2/

Надеюсь, это поможет.

...