Javascript Girl
  1. Javascript Girl
  3. Création d'une boîte de sélection avec une option de recherche
Intereting Posts
Comment déclencher un téléchargement de fichier en cliquant sur un bouton HTML ou JavaScript Comment définir un volume de départ spécifique pour la balise <audio> Reconnaissance de la parole et GetUserMedia Select2: Désactiver les correspondances sensibles à la casse L'utilisation de Phonegap appletant l'application mobile lors du défilement sélectionne un élément incorrect Comment utiliser JSDoc3 pour documenter les espaces de noms imbriqués .offset (). Retour haut retour de la mauvaise valeur Détecter la modification du titre du document via Javascript Toile HTML5: Manipulation de chemins individuels Image Angular.js 404 Non trouvée JQuery Demandes multiples de getJSON Comment enregistrer un canevas HTML5 comme image sur un serveur? Est-il possible de cacher ou de manipuler les icônes "tri" de jqGrid? JQuery prend-il en charge les sélecteurs CSS4? Comment puis-je savoir quand une image de fond CSS a été chargée? Un événement a-t-il été lancé?

Création d'une boîte de sélection avec une option de recherche

J'essaie de reproduire ce que vous pouvez voir ici dans cette image. Entrez la description de l'image ici

Je veux pouvoir saisir le champ de texte au-dessus de la boîte ou cliquer simplement sur l'option directement.

Quel serait le meilleur moyen d'y arriver? Existe-t-il quelque chose de bootstrap déjà existant?

Essayez jQuery ui autocomplete. Pour cela, consultez ce lien

http://jqueryui.com/autocomplete/#combobox

Select2 http://select2.github.io peut être encore mieux et plus actif que Choisi.

Voir cette comparaison: http://sitepoint.com/jquery-select-box-components-chosen-vs-select2

Je suis allé pour Select2 (il y a quelques mois) parce que Chosen avait un problème lors de l'utilisation de caractères chinois via un IME http://github.com/harvesthq/chosen/issues/2663 Cela fonctionne très bien.

Cela se fera en utilisant jquery. Voici le code 

 <select class="chosen" style="width:500px;"> <option>Html</option> <option>Css</option> <option>Css3</option> <option>Php</option> <option>MySql</option> <option>Javascript</option> <option>Jquery</option> <option>Html5</option> <option>Wordpress</option> <option>Joomla</option> <option>Druple</option> <option>Json</option> <option>Angular Js</option> </select> </div> <script type="text/javascript"> $(".chosen").chosen(); </script>

Exemple de travail ici …