Question

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

我的问题是每个搜索框都会搜索所有已分配的列。我想搜索框只搜索名称。目前，它会搜索所有列。

这是一个简单的示例，其中搜索输入<input class="search" placeholder="Search" />将搜索名称和出生

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

});

这是一个在线示例http://codepen.io/ukkpower/pen/rmKbBo

Answer 1

您可以手动搜索，提供要搜索的特定列名称。语法如下：

userList.search(searchText, column);

对于您的问题，请在var userList = new List('users', options);之后添加以下代码：

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

更新了Demo。

list.js有单独的搜索输入

1 个答案: