爲了顯示不僅僅只是產品名稱更多數據本身我已經改變了自動完成控制的呈現自定義行後不再工作。該控件完全按照預期呈現,但是當我使用箭頭鍵導航到一行時,它不會自行選擇一行。劍道自動完成 - 鍵盤導航不
但是,當將鼠標懸停在第一行上並且然後開始使用箭頭鍵時,它的工作原理就像它曾經工作過的一樣,我可以使用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恢復到以前的行爲和工作方式類似打算。