Javascript list.js有单独的搜索输入

我正在使用list.js搜索至少包含两个搜索输入的列表。我希望每个列都有单独的搜索输入

我的问题是，每个搜索框都搜索所有指定的列。我希望搜索框只搜索名称。目前，它搜索所有列

下面是一个简单的示例，其中搜索输入将搜索姓名和出生

<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>

琼尼·韦恩
1986年



乔纳斯
1985年


乔纳斯
1985年


乔纳斯
1985年


玛蒂娜
1986年



古斯塔夫
1983年

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

});

var-options={valueNames:['name'，'born']}；
var userList=新列表（“用户”，选项）；
var updateList=函数（）{
var值_date=$（“.date_s”）.val（）
var值_name=$（“.name_s”）.val（）
警报（值和日期）；
userList.filter（函数（项）{
return（u（values_date）.contains（item.values（）.born）| |！values_date）
});
}
$（函数（）{
//updateList（）；
$（“.date_”）.变更（更新列表）；
$（“.name_”）.change（更新列表）；
var all_born=[]；
var all_name=[]；
_（userList.items）。每个（函数（项）{
所有\u born.push（item.values（）.born）
all_name.push（item.values（）.name）
});
_（所有）。uniq（）。每个（函数（项）{
$（“.date_”）。附加（“”+项+“”）
});
_（all_name）.uniq（）。每个（函数（项）{
$（“.name_”）。追加（“”+项+“”）
}); 
$（'select'）。每个（函数（）{
$（此）。多重选择({
onClick:updateList，
selectAll:false，
占位符：$（this）.data（'占位符'）
});
});
});

---

这是一个在线示例

您可以手动搜索，指定要搜索的特定列名。语法如下所示：

userList.search（searchText，column）

对于您的问题，在
var userList=newlist（'users'，options）之后添加以下代码：

userList.search（'users'，['name']）

更新