0

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

 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 显示属性都设置为 none

4

2 回答 2

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);
});
于 2018-12-18T13:37:29.543 回答
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);
于 2018-12-18T13:24:02.283 回答