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