Fournir aux utilisateurs une fonction de recherche filtrant une liste déroulante

Question

Je développe un formulaire ASP.NET pour la saisie de données. Les utilisateurs doivent sélectionner un client à partir d'une liste déroulante remplie d'environ 1000 clients.

Maintenant, la liste des clients est en croissance et les utilisateurs ont demandé que j'ajoute une fonctionnalité de recherche: ils aimeraient taper une partie du nom et filtrer la liste déroulante avec les clients dont le nom correspond. Donc, s'ils tapent 'aaa', ils aimeraient voir seulement des clients avec 'aaa' quelque part dans leur nom.

J'ai regardé la saisie semi-automatique de la boîte à outils ajax control toolkit mais cela fonctionne sur les zones de texte, pas sur les listes déroulantes.

Quelqu'un peut-il suggérer une bonne solution?

Answer 1

Utilisez-le sur une boîte de texte alors! Sûrement la personne regardant dans la liste déroulante connaît le nom du client. À mon avis, il y a peu de différence dans ce scénario.

J'ai utilisé une balise jQuery pour ajouter à mon application MVC qui fonctionne très bien.

http://remysharp.com/2007/12/28/jquery-tag-suggestion/

Si vous êtes intéressé juste commenter et je vais vous donner le code j'utilise.

Si vous voulez vraiment utiliser une liste déroulante, vous pouvez avoir une zone de texte et une liste déroulante dans un panneau de mise à jour. Lorsque les utilisateurs entrent dans le texte (et clique sur un bouton), vous pouvez remplir la liste déroulante en utilisant les résultats filtrés en fonction de ce que les utilisateurs saisissent.

Answer 2

Je pense qu'une zone de texte serait en fait préféré pour cela. Une boîte de sélection n'invite pas à taper - donc cela devient un peu un truc caché pour le filtrer (sans oublier que Firefox le fera à peu près correctement de toute façon).

Vous pouvez facilement placer une image à côté d'une zone de texte pour indiquer qu'elle dispose d'options, ce qui permet une interaction pilotée par la souris ou par le clavier. Je suis partial à JQuery, donc j'utiliserais JQuery's autocomplete - qui a des options de configuration pour exiger une correspondance, ou que le fait de cliquer sur la boîte déroulera tous les éléments. Si vous êtes intéressé par "l'amélioration progressive", vous pouvez être mieux avec une entrée select traditionnelle (pour l'accessibilité) qui obtient remplacé par une zone de saisie semi-automatique entraînée par les mêmes données. Quelque chose comme:

<select id="s"> 
    <option value="foo">Foo</value> 
    <option value="bar">Bar</value> 
</select> 

var d = $('#s OPTION').map(function() { 
    return $(this).text(); 
}); 

$('#s').hide().append('<input type="text" />') 
    .autocomplete(d, { 
     mustMatch: true, 
     minChars: 0, 
     autoFill: true, 
     matchContains: false 
    }) 
    .result(function(e, d, f) { 
     // Select option for the form to submit 
     $('#s').val(d); 
    }); 

Vous pouvez aussi laisser la sélection visible - ce qui le rend plus souple, mais potentiellement plus confus - et accrocher un gestionnaire d'événement dans la zone de sélection pour mettre à jour la zone de texte et de sorte qu'ils restent synchronisés .