javascript - JavaScript 在搜索中找不到条目

Question

我有一个简单的搜索脚本，当用户添加一个不在列表中的搜索词时想要显示：没有找到项目。

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>

原始脚本在这里找到：https ://codepen.io/rachelhawa/pen/vYBjQMY

标签： javascripthtml

Answer 1

您可以添加一个<p>用于显示无结果，并有一个标志作为显示它的条件

演示

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>