javascript - 使用 JavaScript 进行实时搜索时重新加载名称的问题

Question

所以我试图做一个简单的搜索选项，而用户输入名称时，名称就会显示出来。但是，在我的代码中，只有当用户完全正确输入名称时，名称才会显示。基本上，我希望它显示与用户搜索相关的所有可用名称(如果用户

 const li = document.querySelectorAll("li");
    const input = document.querySelector("#search");
    const form = document.querySelector("form");
    const searchBtn = document.querySelector("button");
    const loopThrough = () => {
    	for (var i = 0; i < li.length; i++) {
    		if (input.value.toLowerCase() === li[i].innerText.toLowerCase()) {
    			li[i].style.display = "block";
    		}
    		if (li[i].style.display = "block" && input.value.toLowerCase().length == 0) {
    			li[i].style.display = "none";
    		}
    	}
    }
    input.addEventListener("keyup", loopThrough);

<form>
  <input type="search" id="search" placeholder="Search here...">
  <button type="button">Search</button>
</form>
	<ul>
		<li>Pierre</li>
		<li>Peter</li>
		<li>Philip</li>
		<li>Mazen</li>
		<li>Zeina</li>
		<li>Anna</li>
		<li>Wael</li>
		<li>Fadi</li>
		<li>Faris</li>
		<li>Walid</li>
	</ul> 

   

键入“p”，我希望所有以“p”开头的名字都显示出来。) 最初，在 CSS 中，所有 li display 属性都设置为 none

Answer 1

对于 JavaScript 和您拥有的文档来说，这是一件微不足道的事情。一些提示:

• 忘记“keyup”，事实上所有明确的键盘事件。你在伤害自己和你的用户。并非所有设备都有键盘，Web 标准背后的聪明人早就预见到了这一点，并且每个文本输入控件都有可触发的“输入”和“更改”事件。
• 您可以对每个“输入”或“更改”事件启动搜索，但如果您的搜索查询需要任何时间，您最好在每个“输入”时重置搜索超时 "事件至少相反——有些人打字速度非常快，应用程序方面没有必要为输入的每个字母运行搜索查询——在许多情况下，对于快速打字者来说，这将远远超过每秒 10 次搜索。浪费资源——重置超时，以便搜索在半秒左右后排队。该数字通常应该是用户的偏好，但这是大多数人不会理会的微小偏好，因此只需使用一些足够好的平均值即可。
• 在这种情况下不要使用内联样式。它们很少是解决方案的合适部分。使用 CSS 类，以便可以在样式表中指定与您的搜索相匹配的元素的行为和样式。或者您可以使用 hidden 属性，它可能是合适的，具体取决于。

这是一些根据您的代码段改编的解决您问题的现成代码:

var timeout;
document.getElementById("form").elements.search.addEventListener("input", function(ev) {
    if(timeout) clearTimeout(timeout);
    timeout = setTimeout(function(input) {
        for(const li of document.querySelectorAll("li")) {
            li.classList.toggle("match", li.textContent.startsWith(input.value));
        }
    }, 500, ev.target);
});