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

Ce code simple a fonctionné pour moi

Si vous avez besoin d'utiliser uniquement la balise select, utilisez Selectize Js. Il a toutes les options dont nous avons besoin. Veuillez essayer Démo utilisant Selectize Js

Answer 2

Selectize Js a toutes les options dont nous avons besoin. Veuillez l'essayer

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

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

Answer 3

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

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

J'ai opté pour Select2 (il y a quelques mois) car Chosen avait un problème lors de l'utilisation de caractères chinois via un IME http://github.com/harvesthq/chosen/issues/2663. Ça fonctionne très bien.

Answer 4

Vous pouvez utiliser select2. C'est le meilleur js pour ce travail.
https://select2.org/dropdown

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

         Sélectionnez une page...
         alpha 
         beta
         theta
         omega

Answer 5

Boîte de sélection pleinement searchable

Cela prend également en charge les boutons de contrôle du clavier tels que ArrowDown ArrowUp et les touches Entrée

function filterFunction(that, event) {
    let container, input, filter, li, input_val;
    container = $(that).closest(".searchable");
    input_val = container.find("input").val().toUpperCase();

    if (["ArrowDown", "ArrowUp", "Enter"].indexOf(event.key) != -1) {
        keyControl(event, container)
    } else {
        li = container.find("ul li");
        li.each(function (i, obj) {
            if ($(this).text().toUpperCase().indexOf(input_val) > -1) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });

        container.find("ul li").removeClass("selected");
        setTimeout(function () {
            container.find("ul li:visible").first().addClass("selected");
        }, 100)
    }
}

function keyControl(e, container) {
    if (e.key == "ArrowDown") {

        if (container.find("ul li").hasClass("selected")) {
            if (container.find("ul li:visible").index(container.find("ul li.selected")) + 1 < container.find("ul li:visible").length) {
                container.find("ul li.selected").removeClass("selected").nextAll().not('[style*="display: none"]').first().addClass("selected");
            }

        } else {
            container.find("ul li:first-child").addClass("selected");
        }

    } else if (e.key == "ArrowUp") {

        if (container.find("ul li:visible").index(container.find("ul li.selected")) > 0) {
            container.find("ul li.selected").removeClass("selected").prevAll().not('[style*="display: none"]').first().addClass("selected");
        }
    } else if (e.key == "Enter") {
        container.find("input").val(container.find("ul li.selected").text()).blur();
        onSelect(container.find("ul li.selected").text())
    }

    container.find("ul li.selected")[0].scrollIntoView({
        behavior: "smooth",
    });
}

function onSelect(val) {
    alert(val)
}

$(".searchable input").focus(function () {
    $(this).closest(".searchable").find("ul").show();
    $(this).closest(".searchable").find("ul li").show();
});
$(".searchable input").blur(function () {
    let that = this;
    setTimeout(function () {
        $(that).closest(".searchable").find("ul").hide();
    }, 300);
});

$(document).on('click', '.searchable ul li', function () {
    $(this).closest(".searchable").find("input").val($(this).text()).blur();
    onSelect($(this).text())
});

$(".searchable ul li").hover(function () {
    $(this).closest(".searchable").find("ul li.selected").removeClass("selected");
    $(this).addClass("selected");
});

div.searchable {
    width: 300px;
    float: left;
    margin: 0 15px;
}

.searchable input {
    width: 100%;
    height: 50px;
    font-size: 18px;
    padding: 10px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, autres WebKit */
    -moz-box-sizing: border-box; /* Firefox, autres Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    display: block;
    font-weight: 400;
    line-height: 1.6;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center/8px 10px;
}

.searchable ul {
    display: none;
    list-style-type: none;
    background-color: #fff;
    border-radius: 0 0 5px 5px;
    border: 1px solid #add8e6;
    border-top: none;
    max-height: 180px;
    margin: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0;
}

.searchable ul li {
    padding: 7px 9px;
    border-bottom: 1px solid #e1e1e1;
    cursor: pointer;
    color: #6e6e6e;
}

.searchable ul li.selected {
    background-color: #e8e8e8;
    color: #333;
}

        Algérie
        Bulgarie
        Canada
        Égypte
        Fidji
        Inde
        Japon
        Iran (République islamique d')
        République démocratique populaire lao
        Micronésie (États fédérés de)
        Nicaragua
        Sénégal
        Tadjikistan
        Yémen