CODEWITHSUNDEEP
javascripthtml
trynaCodeHereGoAway
trynaCodeHereGoAway

Reputation: 71

Add "No results found" message on div search

I'm making an audio player, and I have a list of divs acting as my playlist... I'm using JS to make the list, and I'm using this script to search through them:

/*Search Songs*/
function searchSongs(){
  let input = _('#songSearch').value.toLowerCase();
  let items = _all('.item');
  let dividers = _all(".divider");
  
  for (let i = 0; i < items.length; i++) {
    if (!items[i].innerHTML.toLowerCase().includes(input)) {
      items[i].style.display = "none";
    }
    else {
      items[i].style.display = "";
    }
  }
  
  // add noresults message at end if all list divs are hidden
  if (!items.innerHTML.toLowerCase().includes(input)) {
    _('.noResults').innerHTML = `<p>No results found for "${input}"`
  }
}

I have a paragraph element at the end of my list (with nothing in it) and I want to show the message (<p>No results found for "${input}") is there some js I can use to accomplish this? The script above is working for the searching, but not working for the message.

Upvotes: 0

Views: 1149

Answers (2)

trynaCodeHereGoAway
trynaCodeHereGoAway

Reputation: 71

Finished result:

/*Search Songs*/
function searchSongs(){
  let input = _('#songSearch').value.toLowerCase();
  let items = _all('.item');
  let dividers = _all(".divider");
  let counter = 0;

  for (let i = 0; i < items.length; i++) {
    if (!items[i].innerHTML.toLowerCase().includes(input)) {
      items[i].style.display = "none";
      counter++;
    }
    else {
      items[i].style.display = "";
    }
  }
  
  // keeping the result 22 letters long (for asthetic purposes)
  let maxLen = 22;
  if (input.length > maxLen) {
    input = input.substring(0, maxLen - 3) + "...";
  }
  
  if (counter >= items.length) {
    _('#noResults').innerHTML = `No results found for "${input}"` //add no results message if all items are hidden...
  } else {
    _('#noResults').innerHTML = `` //else hide the message by removing text.
  }
}

Thanks, @Asif !!

Upvotes: 1

Asif Sharif Shahid
Asif Sharif Shahid

Reputation: 370

I've made a little modification in your function. I hope this will solve your issue.

/*Search Songs*/
function searchSongs(){
  let input = _('#songSearch').value.toLowerCase();
  let items = _all('.item');
  let dividers = _all(".divider");
  let counter = 0;

  for (let i = 0; i < items.length; i++) {
    if (!items[i].innerHTML.toLowerCase().includes(input)) {
      items[i].style.display = "none";
    }
    else {
      items[i].style.display = "";
      counter++;
    }
  }
  
  // add noresults message at end if all list divs are hidden
  if (counter > 0) {
    _('.noResults').innerHTML = `<p>No results found for "${input}"`
  }
}

Upvotes: 0

Related Questions