4

テーブルを使用するように AC の HTML をオーバーライドしました。マウスオーバー ホバー効果と選択は同じように機能しますが、キーアップとキーダウンは現在何の効果もありません。キー イベントを AC テーブルで機能させるにはどうすればよいですか?

globalSearch._renderItem = function(table, item) {
    return $( '<tr class="result-row"></tr>' )
                .data( "item.autocomplete", item )
                .append('<td class="ac-search-col"></td>'+
                        '<td class="result-img-col"><img src="x" /></td>'+
                        '<td class="result-info">'+item.val'</td>')
                        .appendTo( table );
});

globalSearch._renderMenu = function(ul, items) {
        var self = this;
        ul.append('<table class="ac-search-table"></table>');
            $.each( items, function( index, item ) {
            self._renderItem( ul.find("table"), item );
        });
};

編集：

これがフィドルです：http://jsfiddle.net/CpTAh/24/

4

2 に答える 2

3

オートコンプリート マークアップを保持し、レンダリングされた出力を変更して、関数に余分なデータを含める方がよいと思います_renderItem( demo )。

/* see http://jqueryui.com/autocomplete/#custom-data */
var availableTags = [
    {
        value: "Item1",
        label: "Item 1",
        desc : "Description for Item 1",
        icon : "http://mysite.com/images/item1.jpg"
    },
    {
        ...
    }
];

$("input").autocomplete({
    source: availableTags
})
.data('autocomplete')._renderItem = function(ul, item) {
    return $( '<li>' )
        .data( "item.autocomplete", item )
        .append('<a><span class="ac-search-col"></span><span class="result-img-col"><img src="' + item.icon + '" /></span><span class="result-info">' + item.label + '<p>' + item.desc + '</p></span>')
        .appendTo( ul );
};

これらのリンクもチェックしてください。

于 2013-01-13T17:22:46.483 に答える
2

どうぞ: http://jsfiddle.net/CpTAh/25/
キーボードイベントを無効にする2つのことがありました:

  1. 各 item 要素は ul のすぐ下にある必要があります。テーブルは 1 つしかありませんでした。だから私はそれを削除し、cssクラスをulに追加し、<tr>要素をulに直接追加しました（これはあまりきれいではありませんが機能します）。
  2. <a>各アイテムに要素が必要です。

行われた編集:

  globalSearch._renderMenu = function(ul, items) {
        var self = this;
        ul.addClass("ac-search-table");   // <= Here adding the class to the ul
            $.each( items, function( index, item ) {
            self._renderItem( ul, item );  // No table, directly the ul
        });
    };

と：

'<td class="result-info"><a>'+item.value+'<br>'+item.rating+'</a></td>' // added an <a> element

ただし、コードは通常の選択 css を壊すため、キーボードを使用して選択するときに、選択した要素の強調表示を確認できません。これは自分で修正させてもらいます。

于 2013-01-16T15:39:59.737 に答える