Rechercher JQuery dans une combobox à sélection multiple

Question

Je dispose d'une liste déroulante multiple et d'un tableau avec des cartes. Ce dont j'ai besoin est : je veux rechercher des utilisateurs en utilisant des sélections multiples et les cartes respectives apparaîtront à l'écran. Les autres disparaîtront en temps réel.

Et lorsque j'ai besoin de nettoyer le filtre en appuyant sur "décocher tout", le filtre sera nettoyé.

Sélectionner tout ramènera tous les utilisateurs.

Je n'ai aucune idée de la façon dont je fais cela.

Quelqu'un peut-il m'aider?

Merci.

Ceci est mon code :

code

$('select').selectpicker();

        $('select').on('change', function() {

            var selected = $(this).find("option:selected");

            var arrSelected = [];

            selected.each(function() {

                arrSelected.push($(this).val());

                alert('' + arrSelected);
            });
        });

          Utilisateur

             John
             James
             Stuart
             Eric
             Earl

                0001
                John

                0002
                James

                0003
                Stuart

                0004
                Eric

                0005
                Earl

Lien JSFiddle

Answer 1

Vous pouvez utiliser .length pour voir s'il n'y a aucune valeur sélectionnée et si c'est le cas, simplement afficher toutes les cartes en utilisant .show().

Maintenant, pour afficher uniquement les cartes sélectionnées, vous pouvez utiliser filter et parcourir vos cartes. Si la valeur sélectionnée correspond, alors affichez cette carte.

Code de démo :

$('select').selectpicker();

$('select').on('change', function() {
  var selected = $(this).find("option:selected");
  //vérification que la longueur de la valeur sélectionnée est de 0 (aucune option sélectionnée)
  if (selected.length == 0) {
    console.log("afficher toutes les cartes")
    $(".card").show();//afficher les cartes
  } else {
    $(".card").hide();//cacher les cartes
    selected.each(function() {      
      var select = $(this).val();
      //filtrer les cartes
      $(".card").filter(function() {
        return $(this).find('.nome').text().indexOf(select) == 0;
      }).show();//afficher la carte qui correspond
    });
  }
});

      Utilisateur

        John
        James
        Stuart
        Eric
        Earl

        0001
        John

        0002
        James

        0003
        Stuart

        0004
        Eric

        0005
        Earl