list.js have separate search inputs

Question

I am using list.js to search a list with at least two search inputs. I want to have separate search inputs for each of the columns.

My issue is that each of the search boxes search all the assigned column. I would like the search box only to search name. At the moment it searches all the columns.

Here is a simple example where the search input <input class="search" placeholder="Search" /> will search name and born

<div id="users">
  <input class="search" placeholder="Search" />
  <select class="date_s" multiple style="width:120px;" data-placeholder="Choose a date">
  </select>
  <select class="name_s" multiple style="width:150px;" data-placeholder="Choose a name">
  </select>


  <ul class="list">
    <li>
      <h3 class="name">Jonny Wayne</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Jonas</h3>
      <p class="born">1985</p>
    </li>
    <li>
      <h3 class="name">Jonas</h3>
      <p class="born">1985</p>
    </li>    
    <li>
      <h3 class="name">Jonas</h3>
      <p class="born">1985</p>
    </li>
    <li>
      <h3 class="name">Martina</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Gustaf</h3>
      <p class="born">1983</p>
    </li>
  </ul>

</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src='//wenzhixin.net.cn/p/multiple-select/assets/multiple-select/jquery.multiple.select.js'></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.0/list.min.js"></script>

Javascript

var options = { valueNames: [ 'name', 'born' ] };
var userList = new List('users', options);

var updateList = function(){
  var values_date = $(".date_s").val()
  var values_name = $(".name_s").val()
  alert(values_date);
  userList.filter(function(item) {
    return (_(values_date).contains(item.values().born) || !values_date) 

  });
}

$(function(){
  //updateList();
  $(".date_s").change(updateList);
  $(".name_s").change(updateList);

  var all_born = [];
  var all_name = [];

  _(userList.items).each(function(item){
    all_born.push(item.values().born)
    all_name.push(item.values().name)  
  });

  _(all_born).uniq().each(function(item){
    $(".date_s").append('<option value="'+item+'">'+ item +'</option>')
  });
  _(all_name).uniq().each(function(item){
    $(".name_s").append('<option value="'+item+'">'+ item +'</option>')
  }); 

  $('select').each(function(){
    $(this).multipleSelect({
      onClick: updateList,
      selectAll: false,
      placeholder: $(this).data('placeholder')
    });
  });

});

This is an online example http://codepen.io/ukkpower/pen/rmKbBo

Answer 1

You can search manually giving the specific column name to search. The syntax goes like this:

userList.search(searchText, column);

For your problem add the following code after var userList = new List('users', options);:

userList.search('users', [ 'name' ]);

Updated Demo.