复制谷歌搜索建议UI

你好，我正在尝试做一些类似谷歌搜索建议的事情。

我目前的实现工作得很好，(它使用一个表，其中包含动态填充的行列表)

问题是，我不知道如何设置keyup和keydown事件导航通过行像谷歌搜索建议。我如何使用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 + "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</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();
            }
        }
    }