Solution 1 :

You could add a <p> for displaying no result, and have a flag as a condition to display it

Demo

function mySearchFunction() {
  // Declare variables
  var input, filter, ul, li, item, i, txtValue, noResultMsg;
  // User Input
  input = document.getElementById("myInput");
  // Filter, makes search not case sensitive
  filter = input.value.toUpperCase();
  // Grabs the parent element by id
  ul = document.getElementById("stateList");
  // Individual item on list
  li = ul.getElementsByTagName("li");
  noResultMsg = document.getElementById('no-result-message')
  noResultMsg.style.display = "none"

  // Treats lists items like an array, where each item can be accessed through      it's index
  let noResult = true
  for (i = 0; i < li.length; i++) {
    item = li[i];
    // Iterate over each list item to see if the value of the input, ignoring         case, matches the inner text or inner html of the item.
    txtValue = item.textContent || item.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      // Displays list items that are a match, and nothing if no match
      li[i].style.display = "";
      noResult = false
    } else {
      li[i].style.display = "none";
    }
  }
  if (noResult) {
    noResultMsg.style.display = ""
  }
}
<input type="text" id="myInput" onkeyup="mySearchFunction()" placeholder="Search">

<ul id="stateList">
  <li>Alabama</li>
  <li>Alaska</li>
  <li>Arizona</li>
  <li>Arkansas</li>
  <li>California</li>
  <li>Colorado</li>
  <li>Connecticut</li>
  <li>Delaware</li>
  <li>Florida</li>
  <li>Georgia</li>
  <li>Hawaii</li>
  <li>Idaho</li>
  <li>Illinois</li>
  <li>Indiana</li>
  <li>Iowa</li>
  <li>Kansas</li>
  <li>Kentucky</li>
  <li>Louisiana</li>
  <li>Maine</li>
  <li>Maryland</li>
  <li>Massachusetts</li>
  <li>Michigan</li>
  <li>Minnesota</li>
  <li>Mississippi</li>
  <li>Missouri</li>
  <li>Montana</li>
  <li>Nebraska</li>
  <li>Nevada</li>
  <li>New Hampshire</li>
  <li>New Jersey</li>
  <li>New Mexico</li>
  <li>New York</li>
  <li>North Carolina</li>
  <li>North Dakota</li>
  <li>Ohio</li>
  <li>Oklahoma</li>
  <li>Oregon</li>
  <li>Pennsylvania</li>
  <li>Rhode Island</li>
  <li>South Carolina</li>
  <li>South Dakota</li>
  <li>Tennessee</li>
  <li>Texas</li>
  <li>Utah</li>
  <li>Vermont</li>
  <li>Virginia</li>
  <li>Washington</li>
  <li>West Virginia</li>
  <li>Wisconsin</li>
  <li>Wyoming</li>
</ul>

<p id="no-result-message" style="display: none">No result found</p>

Solution 2 :

You can add one more <li style="display: none">No result</li>

Additionally, you should add:

    if (txtValue.toUpperCase().indexOf(filter) > -1) {
    // Displays list items that are a match, and nothing if no match
      li[i].style.display = "";
      li[indexOfNoResult].style.display="none";
    } else {
      li[i].style.display = "none";
      li[indexOfNoResult].style.display="";
    }

Problem :

I have a simple search script and wanted when a user adds a search term that’s not on the list to show: No items found.

JavaScript:

function mySearchFunction() {
  // Declare variables
  var input, filter, ul, li, item, i, txtValue;
  // User Input
  input = document.getElementById("myInput");
  // Filter, makes search not case sensitive
  filter = input.value.toUpperCase();
  // Grabs the parent element by id
  ul = document.getElementById("stateList");
  // Individual item on list
  li = ul.getElementsByTagName("li");

  // Treats lists items like an array, where each item can be accessed through it's index
  for (i = 0; i < li.length; i++) {
    item = li[i];
   // Iterate over each list item to see if the value of the input, ignoring case, matches the inner text or inner html of the item.
    txtValue = item.textContent || item.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
    // Displays list items that are a match, and nothing if no match
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

HTML:

<input type="text" id="myInput" onkeyup="mySearchFunction()" placeholder="Search">

<ul id="stateList">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

Original script found here: https://codepen.io/rachelhawa/pen/vYBjQMY

Comments

Comment posted by Emma Stone

Beautiful thank you! Still learning JS and this made me learn more about it.

Comment posted by hgb123

@EmmaStone no problem. I’m learning everyday too. Have fun with the journey

By