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/
有两件事禁用了键盘事件：

  1. 每个 item 元素必须直接在 ul 下，你只有一个：table。所以我删除了它，只是将 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 回答