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);
            });
        });

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/60a0c4a03b.js" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.quicksearch/2.3.1/jquery.quicksearch.js"></script>

<nav class="navbar navbar-light justify-content-center mt-2">
    <form class="form-row">
        <div class="form-group col-md-6">
          <label for="userSelect">User</label>
          <br/>
          <select class="selectpicker" multiple="" data-live-search="true" data-actions-box="true" title="Select user(s)" name="userSelect">
             <option>John</option>
             <option>James</option>
             <option>Stuart</option>
             <option>Eric</option>
             <option>Earl</option>
           </select>
         </div>
    </form>
</nav>
<div class="layout-margin-8 mt-4">
    <div class="card-deck">
        <div class="card text-white bg-success mb-3 text-center">
            <div class="card-body">
                <h4 class="card-title">0001</h4>
                <p class="card-text nome">John</p>
            </div>
        </div>
        <div class="card text-white bg-success mb-3 text-center">
            <div class="card-body">
                <h4 class="card-title">0002</h4>
                <p class="card-text nome">James</p>
            </div>
        </div>
        <div class="card text-white bg-success mb-3 text-center">
            <div class="card-body">
                <h4 class="card-title">0003</h4>
                <p class="card-text nome">Stuart</p>
            </div>
        </div>
        <div class="card text-white bg-success mb-3 text-center">
            <div class="card-body">
                <h4 class="card-title">0004</h4>
                <p class="card-text nome">Eric</p>
            </div>
        </div>
        <div class="card text-white bg-success mb-3 text-center">
            <div class="card-body">
                <h4 class="card-title">0005</h4>
                <p class="card-text nome">Earl</p>
            </div>
        </div>
    </div>
</div>

JSFiddle link

Answer 1

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
    });
  }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.quicksearch/2.3.1/jquery.quicksearch.js"></script>

<nav class="navbar navbar-light justify-content-center mt-2">
  <form class="form-row">
    <div class="form-group col-md-6">
      <label for="userSelect">User</label>
      <br/>
      <select class="selectpicker" multiple="" data-live-search="true" data-actions-box="true" title="Select user(s)" name="userSelect">
        <option>John</option>
        <option>James</option>
        <option>Stuart</option>
        <option>Eric</option>
        <option>Earl</option>
      </select>
    </div>
  </form>
</nav>
<div class="layout-margin-8 mt-4">
  <div class="card-deck">
    <div class="card text-white bg-success mb-3 text-center">
      <div class="card-body">
        <h4 class="card-title">0001</h4>
        <p class="card-text nome">John</p>
      </div>
    </div>
    <div class="card text-white bg-success mb-3 text-center">
      <div class="card-body">
        <h4 class="card-title">0002</h4>
        <p class="card-text nome">James</p>
      </div>
    </div>
    <div class="card text-white bg-success mb-3 text-center">
      <div class="card-body">
        <h4 class="card-title">0003</h4>
        <p class="card-text nome">Stuart</p>
      </div>
    </div>
    <div class="card text-white bg-success mb-3 text-center">
      <div class="card-body">
        <h4 class="card-title">0004</h4>
        <p class="card-text nome">Eric</p>
      </div>
    </div>
    <div class="card text-white bg-success mb-3 text-center">
      <div class="card-body">
        <h4 class="card-title">0005</h4>
        <p class="card-text nome">Earl</p>
      </div>
    </div>
  </div>
</div>