CODEWITHSUNDEEP
javascript
Menor
Menor

Reputation: 300

How to get a number of items in the list

I have got a search function and I would like to display no results, if the query didn't return any items. The problem is, that I am not sure how to get the number or items, that are currently displaying.

Here's my function:

find.addEventListener("keyup", function() {
  Array.from(animalList.children).forEach(d => {
    if (d.dataset.animalName.toLowerCase().indexOf(this.value.toLowerCase()) != -1) {
      d.style.display = "block";
    } else {
      d.style.display = "none";
    }
  });
});

Upvotes: 0

Views: 65

Answers (2)

davidmpaz
davidmpaz

Reputation: 1387

Since you are working with javascript and key event and you told us you want to show some message string upon some list filtering, my suggestion is:

Show the no result message at function start, then filter and if you get results do the respective functionality.

find.addEventListener("keyup", function() {
  // show no result message and then do the other stuff, 
  // this is a UI event handler after all
  Array.from(animalList.children).forEach(d => {
    if (d.dataset.animalName.toLowerCase().indexOf(this.value.toLowerCase()) != -1) {
      d.style.display = "block";
    } else {
      d.style.display = "none";
    }
  });
});

Upvotes: 1

jo3rn
jo3rn

Reputation: 1421

You could work with a boolean flag:

find.addEventListener("keyup", function() {
  let noResults = true;
  Array.from(animalList.children).forEach(d => {
    if (d.dataset.animalName.toLowerCase().indexOf(this.value.toLowerCase()) != -1) {
      d.style.display = "block";
      noResults = false;
    } else {
      d.style.display = "none";
    }
  });
  if (noResults) {
    // display no results
  }
});

Upvotes: 3

Related Questions