ListJs - Hide all elements by default

Question

I have implemented ListJs with the search and by default all the elements inside the list are visible. Is there a way to hide all elements by default and make them visibile only via the search?

Here the basic code I have to create a List with the search (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>

Any idea on how to hide all elements by default?

Thanks.

Answer 1

Using visibleItems and hide()

To hide if the search is empty

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

If you want to hide until first search just use

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>