Jquery search at multiple select combobox

Question

I have a multiple select box and a board whith some cards. What I need is: I want to search users using multiple selections and the respective cards will appear on screen. The others will disappear at real time.

And when I need to clean the filter pressing deselect all, the filter will be clean.

Select all will bring all users.

I have no idea how I do this.

Someone can help me?

Thanks.

This is my 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);
            });
        });

JSFiddle link

Swati · Accepted Answer

You can use use .length to see if there are no selected values and if yes then just show all cards using .show().

Now , to show only selected cards you can use filter and loop through your card if the selected value matches then show that card .

Demo Code :

$('select').selectpicker();

$('select').on('change', function() {
  var selected = $(this).find("option:selected");
  //checking selcted value length is 0 ( no option slected)
  if (selected.length == 0) {
    console.log("show all cards")
    $(".card").show();//show cards
  } else {
    $(".card").hide();//hide cards
    selected.each(function() {      
      var select = $(this).val();
      //filter cards
      $(".card").filter(function() {
        return $(this).find('.nome').text().indexOf(select) == 0;
      }).show();//show card which match
    });
  }
});

Jquery search at multiple select combobox

Answers (1)

Related Questions