复制谷歌搜索建议UI

嗨，我试图做一些像谷歌搜索建议。复制谷歌搜索建议UI

我目前的执行工作正常，（它使用一个表是动态填充行的列表）

的问题是，我不知道设置如何KEYUP和的keydown事件通过行导航就像Google搜索的建议一样。我如何使用JavaScript通过表中的行进行导航，然后将当前选择的值在搜索框中。我最初设法做到了这一点，但是当鼠标悬停在一行上时，我的执行会中断。

我唯一的限制是，由于方式产生的行，我实际上并不能任意代码添加到行本身。只有表格和元素。

下面是一些代码我的执行（当鼠标悬停在该行不工作）注：该行定义了给高亮CSS类。

变种元素=的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(); 
      } 
     } 
    }

来源

2011-07-12 Overload119

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

如果您使用ASP.NET MVC，你可以做得比使用Telerik的ASP.NET MVC扩展差了很多，并利用其自动完成控制。

来源

2011-07-12 21:00:33

复制谷歌搜索建议UI

回答

相关问题