List.js finds the element but still keeps others too

Question

its my first time using List.js. I have the following structure:

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

var coursesList = new List('courses-list', options);

coursesList.on('updated', function(list) {
    console.info(list.matchingItems);
    if (list.matchingItems.length > 0) {
        $('.no-result').hide()
    } else {
        $('.no-result').show()
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<div id="courses-list">
 <input class="search">
  <div id="collectionView" class="list">
    <div class="row1">
     <div class="large-6 small-12 columns" >
      <a href="link/to/somewhere" target="_blank">
       <span class="name">Demokurs Französisch A2 Online</span>
       <p class="description">blabla</p>
     </a>
    </div>
    <div class="large-6 small-12 columns" >
     <a href="link/to/somewhere" target="_blank">
      <span class="name">Französisch</span>
      <p class="description">blabla</p>
     </a>
    </div>
   </div>
    <div class="row2">
     <div class="large-6 small-12 columns" >
      <a href="link/to/somewhere" target="_blank">
       <span class="name">Kurs A</span>
       <p class="description">blabla</p>
     </a>
    </div>
    <div class="large-6 small-12 columns" >
     <a href="link/to/somewhere" target="_blank">
      <span class="name">Kurs B<span>
      <p class="description">blabla</p>
     </a>
    </div>
   </div>
</div>
</div>

Well now if I search for the term A2 it show correctly the content of the firstdiv in row1 BUT also the second div with all of its content. List.js hides row2 as wished.

How can I make it work that it also hides all other divs in a row?

I have also checked if really only matching is there with:

coursesList.on('updated', function(list) {
    console.info(list.matchingItems);
    if (list.matchingItems.length > 0) {
        $('.no-result').hide()
    } else {
        $('.no-result').show()
    }
})

The logs show that list.matchingItems finds only object.

Answer 1

List.js isn't designed to work this way, it doesn't support nested lists, it only counts a list item down 1 level, so its sees the whole of the <div class="row1"> as a single list item and <div class="row2"> as another.

If you want it to work properly I suggest removing the <div class="row1"> and<div class="row2"> so that all the relevant <div> are at the same level. Like shown below:

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

var coursesList = new List('courses-list', options);

coursesList.on('updated', function(list) {
    console.info(list.matchingItems);
    if (list.matchingItems.length > 0) {
        $('.no-result').hide()
    } else {
        $('.no-result').show()
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<div id="courses-list">
  <input class="search">
  <div id="collectionView" class="list">
      <div class="large-6 small-12 columns">
        <a href="link/to/somewhere" target="_blank">
          <span class="name">Demokurs Französisch A2 Online</span>
          <p class="description">blabla</p>
        </a>
      </div>
      <div class="large-6 small-12 columns">
        <a href="link/to/somewhere" target="_blank">
          <span class="name">Französisch</span>
          <p class="description">blabla</p>
        </a>
      </div>
      <div class="large-6 small-12 columns">
        <a href="link/to/somewhere" target="_blank">
          <span class="name">Kurs A</span>
          <p class="description">blabla</p>
        </a>
      </div>
      <div class="large-6 small-12 columns">
        <a href="link/to/somewhere" target="_blank">
          <span class="name">Kurs B</span>
          <p class="description">blabla</p>
        </a>
      </div>
  </div>
</div>

If you absolutely require the nested lists then you should instead use jQuery, in a similar way to this question and not use List.js.