JQuery UI 自动完成的键盘事件

Question

我已经重写了 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/

Answer 1

_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 );
};

另请查看这些链接：

• 扩展自动完成小部件。
• 上述代码的来源。