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

Si vous souhaitez atteindre votre objectif avec quelques mises à jour dans votre code, il vous suffit de faire ce qui suit

    $(document).ready(function () {
        $('select').selectize({
            sortField: 'text'
        });
    });

  // pour effacer la valeur sélectionnée.
   $('form').find('.selectized').each(function(index, element) { element.selectize && element.selectize.clear() })

Answer 2

Pour ceux qui découvrent encore ceci, vous voudrez également considérer Select2, qui fait tout cela facilement. https://select2.org/getting-started/installation

Answer 3

Voici une solution simple sans aucun plugin. Seulement du html et un peu de jquery. Vous pouvez enregistrer le code suivant comme un fichier html et le tester.

function myFunction() {
  $("#dropdown-values").addClass("show");
}

$(document).click(function(e) {
  if( e.target.id != 'myInput') {
    $("#dropdown-values").removeClass("show");
  }
});

function filterFunction() {
  var input, filter, a, i;
  filter = $("#myInput").val().toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}

function setValueOfInput(e) {
    $("#myInput").val(e.innerHTML);
}

.dropdown-content {
  position: absolute;
  background-color: #f6f6f6;
  overflow: auto;
}

.dropdown-content a {
  color: black;
  padding: 10px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block !important;}

.dropdown-values{
    display: none;
}

Menu déroulant avec recherche

        option 1
        option 2
        option 3
        option 4
        option 5

Answer 4

J'ai créé ma propre version pour bootstrap 4. Si vous voulez l'utiliser, vous pouvez vérifier à l'adresse suivante : https://github.com/AmagiTech/amagibootstrapsearchmodalforselect

amagiDropdown(
    {
        elementId: 'commonWords',
        searchButtonInnerHtml: 'Rechercher',
        closeButtonInnerHtml: 'Fermer',
        title: 'Rechercher et Choisir',
        bodyMessage: 'Veuillez d'abord rechercher avec la zone de texte ci-dessous, puis double-cliquez sur l'option choisie.'
    });

                Mot favori

                    revendiquer - Je revendique être un lecteur rapide, mais en réalité je suis moyen.
                    être - Veux-tu être mon ami ?
                    et - Toi et moi serons toujours amis.

Answer 5

Cela se fera en utilisant jQuery. Voici le code

Html
Css
Css3
Php
MySql
Javascript
Jquery
Html5
Wordpress
Joomla
Druple
Json
Angular Js

$(".chosen").chosen();