Question

您好我正在尝试像谷歌搜索建议那样做。

我当前的实现工作正常，（它使用一个包含动态填充行列表的表）

问题在于我不知道如何设置keyup和keydown事件来浏览Google搜索建议等行。如何使用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();
            }
        }
    }

Answer 1

您的应用程序实现了什么？

如果您使用的是ASP.NET MVC，那么使用Telerik的ASP.NET MVC Extensions并利用其自动完成控件可能会更糟糕。

复制Google搜索建议UI

1 个答案: