Skip to main content
identação
Fonte Link
Leandro Angelo
  • 9,4mil
  • 3
  • 23
  • 35

Segue um exemplo utilizando JQuery para adicionar o filtro ao seu select.

var options = {
  valueNames: [ 'name', 'born','city' ]
};

var userList = new List('users', options);

$(".cityFilter").on('change',function(){
  
  var filtro = $(this).val()
  
  if(filtro == "")
  {
    userList.filter();
  }
  else
  {
    userList.filter(function(item) {
      if (item.values().city == filtro) {
        return true;
      } 
      else
      {
        return false;
      }
    });  
  } 
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<div id="users">

  <input class="search" placeholder="Search" data-sort="name" />
    <select class="cityFilter" data-sort="city" >
        <option>    </option>
        <option value="Roma">Roma</option>
        <option value="London">London</option>
        </select>

  <ul class="list">
    <li>
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
       <p class="city">Roma</p>
    </li>
    <li>
      <h3 class="name">Jonas Arnklint</h3>
      <p class="born">1985</p>
      <p class="city">Roma</p>
    </li>
    <li>
      <h3 class="name">Martina Elm</h3>
      <p class="born">1986</p>
      <p class="city">London</p>
    </li>
    <li>
      <h3 class="name">Gustaf Lindqvist</h3>
      <p class="born">1983</p>
       <p class="city">London</p>
    </li>
  </ul>

</div>

Segue um exemplo utilizando JQuery para adicionar o filtro ao seu select.

var options = {
  valueNames: [ 'name', 'born','city' ]
};

var userList = new List('users', options);

$(".cityFilter").on('change',function(){
  
  var filtro = $(this).val()
  if(filtro == ""){
    userList.filter();
  }
  else{
    userList.filter(function(item) {
      if (item.values().city == filtro) {
        return true;
      } else {
      return false;
      }
    });   } 
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<div id="users">

  <input class="search" placeholder="Search" data-sort="name" />
    <select class="cityFilter" data-sort="city" >
        <option>    </option>
        <option value="Roma">Roma</option>
        <option value="London">London</option>
        </select>

  <ul class="list">
    <li>
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
       <p class="city">Roma</p>
    </li>
    <li>
      <h3 class="name">Jonas Arnklint</h3>
      <p class="born">1985</p>
      <p class="city">Roma</p>
    </li>
    <li>
      <h3 class="name">Martina Elm</h3>
      <p class="born">1986</p>
      <p class="city">London</p>
    </li>
    <li>
      <h3 class="name">Gustaf Lindqvist</h3>
      <p class="born">1983</p>
       <p class="city">London</p>
    </li>
  </ul>

</div>

Segue um exemplo utilizando JQuery para adicionar o filtro ao seu select.

var options = {
  valueNames: [ 'name', 'born','city' ]
};

var userList = new List('users', options);

$(".cityFilter").on('change',function(){
  
  var filtro = $(this).val()
  
  if(filtro == "")
  {
    userList.filter();
  }
  else
  {
    userList.filter(function(item) {
      if (item.values().city == filtro) {
        return true;
      } 
      else
      {
        return false;
      }
    }); 
  } 
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<div id="users">

  <input class="search" placeholder="Search" data-sort="name" />
    <select class="cityFilter" data-sort="city" >
        <option>    </option>
        <option value="Roma">Roma</option>
        <option value="London">London</option>
        </select>

  <ul class="list">
    <li>
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
       <p class="city">Roma</p>
    </li>
    <li>
      <h3 class="name">Jonas Arnklint</h3>
      <p class="born">1985</p>
      <p class="city">Roma</p>
    </li>
    <li>
      <h3 class="name">Martina Elm</h3>
      <p class="born">1986</p>
      <p class="city">London</p>
    </li>
    <li>
      <h3 class="name">Gustaf Lindqvist</h3>
      <p class="born">1983</p>
       <p class="city">London</p>
    </li>
  </ul>

</div>

Fonte Link
Leandro Angelo
  • 9,4mil
  • 3
  • 23
  • 35

Segue um exemplo utilizando JQuery para adicionar o filtro ao seu select.

var options = {
  valueNames: [ 'name', 'born','city' ]
};

var userList = new List('users', options);

$(".cityFilter").on('change',function(){
  
  var filtro = $(this).val()
  if(filtro == ""){
    userList.filter();
  }
  else{
    userList.filter(function(item) {
      if (item.values().city == filtro) {
        return true;
      } else {
      return false;
      }
    });   } 
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<div id="users">

  <input class="search" placeholder="Search" data-sort="name" />
    <select class="cityFilter" data-sort="city" >
        <option>    </option>
        <option value="Roma">Roma</option>
        <option value="London">London</option>
        </select>

  <ul class="list">
    <li>
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
       <p class="city">Roma</p>
    </li>
    <li>
      <h3 class="name">Jonas Arnklint</h3>
      <p class="born">1985</p>
      <p class="city">Roma</p>
    </li>
    <li>
      <h3 class="name">Martina Elm</h3>
      <p class="born">1986</p>
      <p class="city">London</p>
    </li>
    <li>
      <h3 class="name">Gustaf Lindqvist</h3>
      <p class="born">1983</p>
       <p class="city">London</p>
    </li>
  </ul>

</div>