Zone de texte avec des suggestions déroulantes

Question

J'ai actuellement une liste déroulante databound sur mon site Web ASP.Net C# 2.0 qui contient environ 400 éléments. Je veux le remplacer par quelque chose de similaire à la zone de texte dans google search où vous entrez la lettre et seulement les entrées commençant par ces lettres surgissent

quelle est une bonne façon de l'implémenter? Existe-t-il des contrôles qui existent déjà et que n'importe qui peut proposer?

Answer 1

Jetez un oeil à http://docs.jquery.com/Plugins/Autocomplete

également ici est un tutorial pour une utilisation avec ASP.Net

Answer 2

Si ceux-ci sont connus enrties, vous pouvez utiliser JQuery, et sur l'événement OnUpdate:

1. si c'est une longue liste, faire Ajax Request à votre serveur web, récupérer la meilleure option
2. si c'est une courte liste, vous pouvez charger toutes les options à la page, et offrir les textes optionnels sans makin g une requête de serveur.

Vérifiez la bibliothèque JQuery pour les implémentations sur la façon d'afficher la suggestion.

Answer 3

Il existe un extendeur AutoComplete comme passé de AJAX Control Toolkit pour ASP.NET. Il y a beaucoup d'options différentes que vous pouvez définir pour la mise en cache du client, intervalle de retard. Il suffit de pointer sur un service web ou une méthode de page et vous partez.

Answer 4

check complete.ly trop

http://complete-ly.appspot.com/

il n'a pas de dépendances et de poids très peu.

Answer 5

TextBoxValueToDropDownList

function AddNames(text) { 

     if (document.myForm.insertText.value == "") { 
      document.getElementById("insertText").style.border = "1px solid red"; 
      return false; 
     } 
     else { 
      var option = document.createElement("OPTION"); 
      option.text = text.value; 
      option.value = text.value; 
      document.getElementById("dropDownList").options.add(option); 
      document.myForm.insertText.value = ""; 
      document.getElementById("insertText").style.border = "1px solid green"; 
     } 
    } 




    <form name="myForm"> 
     <table> 
      <tr> 
       <td> 
        <input type="text" name="insertText" id="insertText" /></td> 
       <td></td> 
       <td> 
        <select name="dropDown" id="dropDownList"> 
        </select> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <input type="button" value="Insert" id="button" onclick="AddNames(insertText);" /></td> 
      </tr> 
     </table> 
    </form> 

Answer 6

Une façon de le faire en utilisant HTML5 (pour les petits ensembles de données bien sûr) est datalist:

<input list="users" name="users"> 
    <datalist id="users"> 
    <option value="Alice"> 
    <option value="Bob"> 
    <option value="Chuck"> 
    <option value="Chris"> 
    <option value="Duke"> 
    <option value="Emily"> 
    </datalist> 

Pour grands ensembles de données AJAX est une meilleure façon d'aller.