Créer une boîte de sélection avec une option de recherche

Question

Je suis en train d'essayer de reproduire ce que vous pouvez voir ici dans cette image.

Je veux pouvoir soit taper dans le champ de texte au-dessus de la boîte, soit simplement cliquer sur l'option directement.

Quelle serait la meilleure façon de procéder? Y a-t-il déjà quelque chose lié à Bootstrap qui existe?

Answer 1

Vous pouvez y parvenir sans JavaScript en utilisant l'élément Datalist HTML pur :

Références :

• Puis-je utiliser? - Support détaillé des navigateurs pour l'élément Datalist
• MDN - : L'élément de liste de données HTML
• w3schools - Balise HTML Datalist

Answer 2

Cela fonctionnera pour la plupart d'entre nous. La réponse donnée par Hemanth Palle est la manière la plus simple de le faire, cela a fonctionné pour moi et le code JS n'était pas nécessaire. Le seul problème que j'ai trouvé est que selon W3Schools, la balise datalist n'est pas prise en charge dans Internet Explorer 9 et les versions antérieures, ou dans Safari.

Answer 3

Si vous souhaitez atteindre votre objectif uniquement avec du vanilla js, alors je recommande vivement d'utiliser la bibliothèque Tom Select qui est forkée de Selectize.js et ensuite séparée de jQuery.

    new TomSelect("#select-state",{
        create: false,
        sortField: {
            field: "text",
            direction: "asc"
        }
    });

    Sélectionnez un état...
    Alabama
    Alaska
    Arizona
    Arkansas
    Californie
    Colorado
    Connecticut
    Delaware
    District de Columbia
    Floride
    Géorgie
    Hawaï
    Idaho
    Illinois
    Indiana

Answer 4

$(document).ready(function () {
//change selectboxes to selectize mode to be searchable
   $("select").select2();
});

         Sélectionnez une page...
         alpha 
         beta
         thêta
         oméga

C'était une bonne solution, mais le seul problème est qu'elle est inefficace pour des données importantes

Answer 5

Voici une bibliothèque open source pratique que j'ai créée plus tôt qui utilise jQuery : https://bitbucket.org/warwick/searchablelist/src/master/. Et voici une copie fonctionnelle sur mon VPS : http://developersfound.com/SearchableList/. La bibliothèque est hautement personnalisable avec des comportements remplaçables et peut avoir des conceptions séparées sur la même page web. J'espère que cela vous aidera.