Comment modifier l'élément sélectionné dans une liste déroulante basée sur la saisie d'un utilisateur dans une zone de texte?

Question

J'ai une liste déroulante qui pourrait éventuellement contenir plus de 1000 articles pour un gros client.

<select name="location" id="location"> 
    <option value="1">Store# 1257</option> 
    <option value="2">Store# 1258</option> 
    ... 
    <option value="973">Store# 8200</option> 
    <option value="974">Store# 8250</option> 
    <option value="975">Store# 8254</option> 
    <option value="976">Store# 8290 Fuel Center</option> 
</select> 

J'ai aussi une zone de texte et lorsque les types d'utilisateurs dans le texte que je veux déplacer l'élément sélectionné dans la liste déroulante. Par exemple, si l'utilisateur tape 82, je veux passer au premier élément de la boîte où il existe un 82 qui serait la valeur 973. Si l'utilisateur tape 825, puis passer à 974, etc. Si l'utilisateur tape Carburant, trouvez la première option contenant cette chaîne. Je suis actuellement en train d'utiliser jquery comme ma bibliothèque javascript.

Que proposez-vous pour résoudre ce problème? Devrais-je passer à une saisie semi-automatique? Si c'est le cas, j'ai besoin de quelque chose qui a une flèche pour dérouler la liste entière que certains clients peuvent avoir seulement 3 ou 4 à choisir.

Merci.

Answer 1

Étant donné une searchFor variable qui contient la chaîne de recherche, vous pouvez sélectionner la première option qui contient ce texte avec cet extrait de jquery:

$("#location option[text*=" + searchFor + "]:first").attr("selected", true); 

Donc, si vous avez une entrée de texte avec l'ID selectSearchBox, vous pourriez écrivez-le comme ceci:

$("#selectSearchBox").keyup(function() { 
    var searchFor = $(this).val(); 
    $("#location option[text*=" + searchFor + "]:first").attr("selected", true); 
}); 

Answer 2

L'utilisation de jQuery autocomplete plugin pourrait être la meilleure option pour vous. Vous pouvez jeter un oeil à une réponse précédente here sur SO (s'il vous plaît, ne faites pas cette sélection => tableau de traduction, utilisez un tableau ou un script côté serveur).