6

jQuery UI オートコンプリートでカスタム 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 エラーが発生します (アイテムは未定義です)。

アイデアや提案はありますか？私はほぼすべてを試しました。

4

1 に答える 1

12

あなたはほとんどそこにいました！これを機能させるために2つの変更を加えただけです（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機能：

_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/

それが役立つことを願っています。

于 2011-02-05T17:46:08.677 に答える