Replicating Google Search Suggestions UI

Hi I'm trying to do something like Google Search Suggestions.

My current implementation works fine, (it uses a table with a list of populated rows that are dynamic)

The problem is that I don't know how to setup keyup and keydown events to navigate through the rows like Google Search suggestion does. How can I use j开发者_JS百科avascript to navigate through the table rows, then pull the currently selected value into the search box. I originally managed to do this, but then when the mouse hovered over a row, my implementation would break.

My only limitation is that because of the way the rows are generated, I can't actually add any code to the rows themselves. Only the table and the element.

Here is some code with my implementation (which doesn't work when the mouse hovers over the rows) NOTE: The rows have a CSS class defined to give the highlighting.

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();
            }
        }
    }

What's your application implemented with?

If you're using ASP.NET MVC, you could do a lot worse than use Telerik's ASP.NET MVC Extensions and exploit their Autocomplete control.