Kendo AutoComplete - 自定义行后键盘导航不再起作用

Question

为了显示比仅产品名称更多的数据，我更改了 AutoComplete 控件的呈现方式。控件呈现的效果与预期完全一样，但是当我使用箭头键导航到一行时，它不会自行选择一行。

但是，当首先将鼠标悬停在一行上并 然后 开始使用箭头键时，它的工作方式就像以前一样，我可以使用 enter 进行选择。只是缺少突出显示。

我想实现以下目标：

• 在键入后直接使用向下箭头，而不必先将鼠标悬停在行上
• 使选定的行具有不同的样式（如背景颜色），以便用户看到选定的行

我试图拦截 AutoComplete 在为所选行设置类或样式方面所做的事情，但我没有成功让它显示它对行的作用，因为它会在我进入 Firebug 的那一刻隐藏以及其他实现相同功能的工具。

我也无法弄清楚为什么第一个向下箭头不起作用。我假设控件现在找不到行了，现在布局变得更加复杂，通过引入带有头部的表格，但我不确定。

function CreateAutocompletes() {
    $('[data-autocomplete]').each(function (index, element) {
        var requestUrl = $(element).attr('data-action');
        var elm = $(element).autocomplete({
            minLength: 2,
            source: function(request, response) {
                var warehouseId = $('#WarehouseId').val();
                $.ajax({
                    url: requestUrl,
                    dataType: 'json',
                    data: {
                        query: request.term,
                        warehouseId: warehouseId
                    },
                    success: function(data) {
                        response($.map(data, function(item) {
                            return {
                                value: item.Name,
                                realValue: item.ProductId,
                                label: item.Name,
                                ProductId: item.ProductId,
                                SKU: item.SKU,
                                Name: item.Name,
                                Stock: item.Stock,
                                Ordered: item.Ordered,
                                BulkOrdered: item.BulkOrdered,
                                Underway: item.Underway,
                                Surplus: item.Surplus
                            };
                        }));
                    }
                });
            },
            select: function(event, ui) {
                var hiddenFieldName = $(this).attr('data-value-name');
                $('#' + hiddenFieldName).val(ui.item.ProductId);
                $(this).parent().next().children().first().focus();
            }
        }).data("ui-autocomplete");

        elm._renderItem = function (table, item) {
            return $("<tr class='ui-menu-item'></tr>")
              .append("<td><a>" + item.SKU + "</a></td><td><a>" + item.Name + "</a></td>" +
                "<td><a>" + item.Stock + "</a></td><td><a>" + item.Ordered + "</a></td><td><a>" + item.BulkOrdered + "</a></td>" +
                "<td><a>" + item.Underway + "</a></td>")
              .appendTo(table);
        };

        elm._renderMenu = function(ul, items) {
            var self = this;
            ul.append("<table class='table table-striped'><thead><tr class='ui-menu-item'><th>" + Translations.SKU + "</th><th>" + Translations.Name + "</th>" +
                "<th>" + Translations.Stock + "</th><th>" + Translations.Ordered + "</th><th>" + Translations.BulkOrdered + "</th><th>" + Translations.Underway + "</th>" +
                "</tr></thead><tbody></tbody></table>");
            $.each(items, function(index, item) {
                self._renderItemData(ul.find("tbody"), item);
            });
        };
    });
}

我只需要注释掉 elm._renderItem 和 elm._renderMenu 即可返回到之前的行为，并且效果如预期。

Answer 1

经过进一步研究，我发现它尝试在li-tag 上设置一个名为ui-state-focus 的类，其中包含的a-tag 然后获得背景和边框。

由于在上面的修改版本中，a-标签被重复了几次，它可能会因此而窒息。我创建了一个丑陋的 hack，它通过创建一个具有固定宽度跨度的人造表来工作，这甚至适用于标题：

   elm._renderItem = function (table, item) {
        return $("<li role='option' class='option' style='width:920px'>")
            .append("<a><div style='width:120px' >" +
                item.SKU +
                "</div><div style='width:500px; overflow:hidden'>" +
                item.Name +
                "</div><div style='width:70px'>" +
                item.Stock +
                "</div><div style='width:70px'>" +
                item.Ordered +
                "</div><div style='width:70px'>" +
                item.BulkOrdered +
                "</div><div style='width:70px'>" +
                item.Underway +
                "</div></a></li>")
            .appendTo(table);
    };

    elm._renderMenu = function(ul, items) {
        var self = this;
        ul.append("<li class='autocomplete-header'><div style='width:120px'>" +
            Translations.SKU +
            "</div><div style='width:500px;overflow:hidden'>" +
            Translations.Name +
            "</div><div style='width:70px'>" +
            Translations.Stock +
            "</div><div style='width:70px'>" +
            Translations.Ordered +
            "</div><div style='width:70px'>" +
            Translations.BulkOrdered +
            "</div><div style='width:80px'>" +
            Translations.Underway +
            "</div></li>");
        $.each(items, function(index, item) {
            self._renderItemData(ul, item);
        });
    };

这并不漂亮，可能您应该使用类而不是硬编码值来设置列宽，但如果您遇到同样的问题，这至少应该让您上路。

如果有更好的解决方案，我想听听！