Réplication des suggestions de recherche Google UI

Question

Bonjour, J'essaie de faire quelque chose comme des suggestions de recherche Google.

Mon implémentation actuelle fonctionne très bien, (il utilise une table avec une liste de lignes peuplées qui sont dynamiques)

Le problème est que je ne sais pas comment keyup configuration et les événements keydown pour naviguer à travers les lignes comme la suggestion de recherche Google fait. Comment puis-je utiliser javascript pour naviguer dans les lignes du tableau, puis tirer la valeur actuellement sélectionnée dans la boîte de recherche. À l'origine, j'ai réussi à le faire, mais lorsque la souris a plané sur une rangée, ma mise en œuvre s'est brisée. Ma seule limitation est qu'en raison de la façon dont les lignes sont générées, je ne peux pas réellement ajouter de code aux lignes elles-mêmes. Seulement la table et l'élément.

Voici un code avec mon implémentation (qui ne fonctionne pas lorsque la souris survole les lignes) REMARQUE: Les lignes ont une classe CSS définie pour donner la mise en évidence.

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

De quoi votre application est-elle implémentée? Si vous utilisez ASP.NET MVC, vous pouvez faire beaucoup plus mal que d'utiliser les extensions ASP.NET MVC de Telerik et exploiter leur contrôle de saisie semi-automatique.