複製谷歌搜索建議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

回答

相關問題