Question

为了显示更多数据而不仅仅是产品名称，我已经更改了自动完成控件的渲染。控件呈现与预期完全一样，但是当我使用箭头键导航到一行时，它不会单独选择一行。

然而，当首先将鼠标悬停在一行上并且然后开始使用箭头键时，它就像以前一样工作，我可以使用输入，所以选择。只缺少突出显示。

我想实现以下目标：

要在键入后直接向下工作，而不是先将鼠标悬停在行上
使所选行具有不同的样式（如背景颜色），以便用户看到选择了哪一行

我试图拦截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

经过一番研究后，我发现它试图在ui-state-focus标签上设置一个名为li的课程，其中包含的a - 标签会获得背景和边界。

由于在上面的修改版本中，a - 标签重复了几次，因此可能会对此感到窒息。我创建了一个丑陋的黑客，通过创建一个带有固定宽度的跨度的虚拟表来工作，这甚至适用于标题：

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

它不漂亮，可能你应该使用类而不是硬编码值来进行列宽，但如果你遇到同样的问题，这至少应该让你顺利。

如果有更好的解决方案，我希望听到它！

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

1 个答案: