Kendo AutoComplete - навигация с клавиатуры больше не работает после пользовательских строк

Question

Чтобы отображать больше данных, чем только имя продукта, я изменил рендеринг элемента управления автозаполнением. Элемент управления отображается точно так же, как и предполагалось, но когда я использую клавиши со стрелками для перехода к строке, он не будет выбирать строку самостоятельно.

Однако, когда наведите курсор на строку сначала и , тогда начните использовать клавиши со стрелками, она работает так же, как и раньше, и я могу использовать 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

После еще некоторого изучения я узнал, что он пытается установить класс под названием ui-state-focus на li и в тег a в тег, содержащийся в нем, то получает фона и границы.

Поскольку в модифицированной версии выше a-tag повторялось несколько раз, это могло бы задохнуться от этого. Я создал уродливый хак, который работает за счет создания таблицы лже с пролетами с фиксированной шириной, это работает даже с заголовками:

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

Это не красиво и, вероятно, вы должны сделать ширину столбцов с классом, а не аппаратно но это, по крайней мере, должно помочь вам в этом, если у вас возникнут те же проблемы.

Если есть лучшее решение, я бы хотел его услышать!