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

使用startsWith函数

使用您的代码：

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().startsWith(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);

Answer 2

这与JavaScript和像您一样的文档无关紧要。一些指针：

忘记“按键”，实际上是所有显式的键盘事件。您正在做自己，您的用户会受到损害。并非所有设备都具有键盘，并且早在Web标准之后的聪明人就可以预见到这一点，并且每个文本输入控件上都可以触发“输入”和“更改”事件。
您可以在每个“输入”或“更改”事件上发起搜索，但是如果您的搜索查询花费了任何时间，则明智的做法是在每个“输入”上重置搜索 timeout 至少是事件”-有些人输入速度非常快，而且应用程序方面不需要对每个输入的字母都运行搜索查询-在许多情况下，对于快速输入器来说，每秒要进行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);
});

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

2 个答案: