javascript - 过滤/搜索 - 删除搜索前查看可搜索元素的选项

Question

我对 HTML、CSS 和 JS 很陌生。只为只在我们的网络上本地显示的工作做一个站点。

我开发了一个快速站点，想添加一个搜索选项来搜索我的索引页上的链接。

我在网上找到了一个非常有效的代码，但考虑到我有超过 75 个链接要添加到搜索中。我想删除您查看要搜索内容的窗口。但我希望窗口在输入搜索词的第一个字母后出现。

在这里找到代码: https://www.w3schools.com/howto/howto_js_filter_lists.asp

<input type="text" id="myInput" onkeyup="myFunction()" 
 placeholder="Search for names..">

 <ul id="myUL">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>

 <li><a href="#">Billy</a></li>
 <li><a href="#">Bob</a></li>

 <li><a href="#">Calvin</a></li>
 <li><a href="#">Christina</a></li>
 <li><a href="#">Cindy</a></li>
 </ul>


<script>
function myFunction() {
  // Declare variables
 var input, filter, ul, li, a, i, txtValue;
 input = document.getElementById('myInput');
 filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName('li');

   // Loop through all list items, and hide those who don't match the 
   search query
    for (i = 0; i < li.length; i++) {
     a = li[i].getElementsByTagName("a")[0];
     txtValue = a.textContent || a.innerText;
     if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
     } else {
       li[i].style.display = "none";
  }       
     } 
  }

Answer 1

将 display: none 添加到您的 css 中的链接，因此如果有任何匹配，它将被显示，如果它匹配，也会在 JS 中显示为 display="block"而不是 display=""。例如:

var items = document.querySelectorAll('#myUL li a');
var searchbar = document.querySelector('#myInput');

//Append the eventlistener
searchbar.addEventListener('keyup', searchfunction, false);

function searchfunction(_) {  
  //Value of the searchbar
  var query = _.target.value.toLowerCase(); 

  //Check if the title matches the current value of the searchbar
  items.forEach(function(item) {
    //toLowerCase to make it case insensitive (optional)
    var title = item.innerText.toLowerCase();
    
    //if the search query matches at any point display it
    if (title.indexOf(query) > -1) {
      item.parentElement.style.display = 'block';
    } else {
      item.parentElement.style.display = 'none';
    }
    
    //If the search query is empty do not display any links
    if (query == '') {
    	item.parentElement.style.display = 'none';
		}
    
  });
}

#myUL li {
  display: none;
}

<input type="text" id="myInput" 
 placeholder="Search for names..">

 <ul id="myUL">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>

 <li><a href="#">Billy</a></li>
 <li><a href="#">Bob</a></li>

 <li><a href="#">Calvin</a></li>
 <li><a href="#">Christina</a></li>
 <li><a href="#">Cindy</a></li>
 </ul>