2016-11-12 54 views
0

为了显示不仅仅只是产品名称更多数据本身我已经改变了自动完成控制的呈现自定义行后不再工作。该控件完全按照预期呈现,但是当我使用箭头键导航到一行时,它不会自行选择一行。剑道自动完成 - 键盘导航不

但是,当将鼠标悬停在第一行上并且然后开始使用箭头键时,它的工作原理就像它曾经工作过的一样,我可以使用enter来选择。只有突出缺乏。

我想实现以下目标:

  • 为了获得向下箭头工作打字,而不必悬停在第一
  • 获取所选行,从而具有不同的风格的行后直(如背景色),使用户可以看到该行被选中

我试图拦截自动完成什么呢类或样式设置为选定行的条件,但我不是成功的在得到它显示什么它会这样做隐藏我进入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恢复到以前的行为和工作方式类似打算。

回答

0

经过一番研究后,我发现它试图在li -tag和a -tag中设置一个名为ui-state-focus的类,然后它包含背景和边框。

由于在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); 
     }); 
    }; 

这不是漂亮,可能是你应该做的,而不是硬带班列宽编码值,但至少应该让你在路上遇到同样的问题。

如果有更好的解决方案,我想听听它!