为了显示不仅仅只是产品名称更多数据本身我已经改变了自动完成控制的呈现自定义行后不再工作。该控件完全按照预期呈现,但是当我使用箭头键导航到一行时,它不会自行选择一行。剑道自动完成 - 键盘导航不
但是,当将鼠标悬停在第一行上并且然后开始使用箭头键时,它的工作原理就像它曾经工作过的一样,我可以使用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恢复到以前的行为和工作方式类似打算。