Привет, я пытаюсь сделать что-то вроде Google Search Suggestions.
Моя текущая реализация работает нормально, (она использует таблицу со списком заполненных строк, которые являются динамическими)
проблема в том, что я не знаю, как настроить события keyup и keydown для навигации по строкам, как это делает предложение Google Search.Как я могу использовать javascript для навигации по строкам таблицы, а затем перетащить текущее выбранное значение в поле поиска.Первоначально мне удалось это сделать, но потом, когда мышь зависла над строкой, моя реализация сломалась.
Единственное ограничение - это то, что из-за способа генерации строк я не могу добавить кодв самих рядах.Только таблица и элемент.
Вот некоторый код с моей реализацией (который не работает, когда мышь наводит курсор на строки) ПРИМЕЧАНИЕ. Строки имеют класс CSS, определенный для выделения текста.
var element =document.getElementById ("PeriodListFrom");
element.onkeyup = function (e) {
var keyCode = (window.event) ? window.event.keyCode : e.keyCode;
var table = document.getElementById("PeriodListFrom_Search").children[0];
var html = {
innerHtml: "",
matchCount: 0,
addRow: function (id, string) {
this.innerHtml += "<tr id='" + id + "'><td>" + string + "          </td></tr>";
this.matchCount++;
}
};
if ($("#PeriodListFrom").val() == "") {
$("#PeriodListFrom_Search").hide();
return;
}
// Navigate down
if(keyCode==40){
var selectedIndex = 0;
// Search the table for highlighted rows
for(var i = 0; i<table.rows.length; i++){
if( $(table.rows[i]).css("background-color") != "rgba(0, 0, 0, 0)"){
// Reset the color of the last index
$(table.rows[i]).css("cursor","");
$(table.rows[i]).css("background-color","");
selectedIndex = i+1;
break;
}
}
$(table.rows[selectedIndex]).css("cursor","default");
$(table.rows[selectedIndex]).css("background-color","#FFF2E3");
}
else if(keyCode==13) {
for(var i = 0; i<table.rows.length; i++){
if( $(table.rows[i]).css("background-color") != "rgba(0, 0, 0, 0)"){
$("#PeriodListFrom").val(table.rows[i].id);
break;
}
}
document.getElementById("PeriodListFrom").onblur();
} else if(keyCode == 38) {
var selectedIndex = 0;
// Search the table for highlighted rows
for(var i = 0; i<table.rows.length; i++){
if( $(table.rows[i]).css("background-color") != "rgba(0, 0, 0, 0)"){
// Reset the color of the last index
$(table.rows[i]).css("cursor","");
$(table.rows[i]).css("background-color","");
selectedIndex = i-1;
break;
}
}
$(table.rows[selectedIndex]).css("cursor","default");
$(table.rows[selectedIndex]).css("background-color","#FFF2E3");
} else { // Actually searching
var matches = PeriodManager.Search($("#PeriodListFrom").val());
for (var i = 0; i < matches.length && i < 10; i++) {
html.addRow(matches[i], matches[i]);
}
if (html.matchCount > 0) {
$(table).html(html.innerHtml);
$("#PeriodListFrom_Search").show();
} else {
$("#PeriodListFrom_Search").hide();
}
}
}