ListJs -默认情况下隐藏所有元素

Question

我已经使用搜索实现了ListJs，默认情况下列表中的所有元素都是可见的。有没有办法在默认情况下隐藏所有元素，并且只通过搜索使它们可见？

这里的基本代码，我必须创建一个列表与搜索(Codepen)：

​

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

var myList = new List('myList', options);

var noItems = $('<div class="item" id="no-items-found">No items found!</div>');

myList.on('updated', function(list) {
  if (list.matchingItems.length == 0) {
    $(list.list).append(noItems);
  } else {
    noItems.detach();
  }
});

setTimeout(function(){
  $('#search').focus();
}, 250);

.list {
  font-family:sans-serif;
  margin:0;
  padding:20px 0 0;
}
.list > li {
  display:block;
  background-color: #eee;
  padding:10px;
  box-shadow: inset 0 1px 0 #fff;
}
.name {
  font-size: 16px;
  margin:0 0 0.3rem;
  font-weight: normal;
  font-weight:bold;
}
.born {
  margin:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myList">
  <input class="search" placeholder="Search" /> 
  <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>

​

你知道如何在默认情况下隐藏所有元素吗？

谢谢。

Answer 1

使用visibleItems和hide()

如果搜索为空，则隐藏

myList.on('searchComplete', function(list) {
  if ($('input.search').val() == '') {
    list.visibleItems.forEach(i => i.hide())
  }
})

如果您想在第一次搜索之前隐藏起来，只需使用

myList.visibleItems.forEach(i => i.hide())

​

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

var myList = new List('myList', options);

var noItems = $('<div class="item" id="no-items-found">No items found!</div>');

myList.on('updated', function(list) {
  if (list.matchingItems.length == 0) {
    $(list.list).append(noItems);
  } else {
    noItems.detach();
  }
});

myList.on('searchComplete', function(list) {
  if ($('input.search').val() == '') {
    list.visibleItems.forEach(i => i.hide())
  }
}).trigger('searchComplete')

setTimeout(function() {
  $('#search').focus();
}, 250);

.list {
  font-family: sans-serif;
  margin: 0;
  padding: 20px 0 0;
}

.list>li {
  display: block;
  background-color: #eee;
  padding: 10px;
  box-shadow: inset 0 1px 0 #fff;
}

.name {
  font-size: 16px;
  margin: 0 0 0.3rem;
  font-weight: normal;
  font-weight: bold;
}

.born {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myList">
  <input class="search" placeholder="Search" />
  <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">Martina</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Gustaf</h3>
      <p class="born">1983</p>
    </li>
  </ul>
</div>

​