用于制作搜索栏的 Js /如何在用户完成搜索后才出现“不匹配”？/
[英]Js for making a search bar /How do I make “no match” appear only after the user has finished typing in their search?/
问题描述
当我仍然输入诸如“De”之类的内容时，下面的列表将显示“Demi”和“不匹配”，但我仍在输入，如何仅在用户完成搜索输入后才显示“不匹配”？
usernameInput.addEventListener("keyup",function(){ const usernameInput = document.getElementById("usernameInput") let userName = event.target.value.toLowerCase() let allNamesDOMCollection = document.getElementsByClassName("name") for(var count=0; count < allNamesDOMCollection.length;count++) { const currentName = allNamesDOMCollection[count].textContent.toLowerCase() if(currentName.includes(userName)) {allNamesDOMCollection[count].style.display = "block"; const nomatch = document.getElementById("nomatch"); nomatch.style.display = "none" } else { allNamesDOMCollection[count].style.display = "none"; const nomatch = document.getElementById("nomatch"); nomatch.style.display = "block" } } });
body { font-family: 'Rubik', sans-serif; width: 900px; margin:0 auto } .container { border: 3px solid; margin: 2rem 0rem } /* searchbar */ .searchbar { display:flex; background-color: orange; font-weight: 700; font-size: 2rem; } .searchbar { padding: 2rem; } #usernameInput { margin-left:1rem; width: 30%; } /* namelist */ .namelist { background-color: rgba(16,95,229,.8); padding: 1rem; } .liststar { list-style:none; margin:0; padding-left:0; } li { background-color: white; margin:0.5em; padding: 1rem; font-size:1.2rem; text-align:center; } #nomatch { display:none }
<html> <body> <div class="container"> <div class="searchbar"> <label for="usernameInput">Search Users</label> <input id="usernameInput" type="text"> </div> <div class="namelist"> <ul class="liststar"> <li class="name">Demi</li> <li class="name">Joe</li> <li class="name">Jojo</li> <li class="name">Lily</li> <li class="name">Tata</li> <li class="name">Momo</li> <li class="name">Dad</li> <li class="name">Sister</li> <li id="nomatch"> no match</li> </ul> </div> </div> </body>
1 个解决方案
解决方案1
0 已采纳 2020-08-27 22:21:56
主要问题是您在每次循环迭代（列表中的每个单词）时隐藏/显示“不匹配”，您需要在循环完成并检查所有单词后做出决定。 所以移动nomatch.style.display = ...这样它就在循环之后，如果你知道循环期间是否有匹配，你就只能正确设置它，所以你需要一个变量跟踪那个。
此外，您的代码使用了一些较旧的语法，并且可以简化很多。
请参阅内联评论：
// Get your DOM references just once const nomatch = document.getElementById("nomatch"); const usernameInput = document.getElementById("usernameInput"); // .getElementsByClassName() is bad for performance let allNamesDOMCollection = document.querySelectorAll(".name"); usernameInput.addEventListener("keyup", function(){ let searchValue = this.value.toLowerCase(); let itemsFound = false; // Keeps track of any possible matches // Node lists can be looped over with Array.forEach() allNamesDOMCollection.forEach(function(currentName){ if(currentName.textContent.toLowerCase().includes(searchValue)){ currentName.style.display = "block"; itemsFound = true; } else { currentName.style.display = "none"; } }); // You should only show/hide "no match" after the loop // is done checking all the entries. nomatch.style.display = itemsFound ? "none" : "block"; });
body { font-family: 'Rubik', sans-serif; width: 900px; margin:0 auto } .container { border: 3px solid; margin: 2rem 0rem } /* searchbar */ .searchbar { display:flex; background-color: orange; font-weight: 700; font-size: 2rem; } .searchbar { padding: 2rem; } #usernameInput { margin-left:1rem; width: 30%; } /* namelist */ .namelist { background-color: rgba(16,95,229,.8); padding: 1rem; } .liststar { list-style:none; margin:0; padding-left:0; } li { background-color: white; margin:0.5em; padding: 1rem; font-size:1.2rem; text-align:center; } #nomatch { display:none }
<html> <body> <div class="container"> <div class="searchbar"> <label for="usernameInput">Search Users</label> <input id="usernameInput" type="text"> </div> <div class="namelist"> <ul class="liststar"> <li class="name">Demi</li> <li class="name">Joe</li> <li class="name">Jojo</li> <li class="name">Lily</li> <li class="name">Tata</li> <li class="name">Momo</li> <li class="name">Dad</li> <li class="name">Sister</li> <li id="nomatch"> no match</li> </ul> </div> </div> </body>
如何仅在输入 3 个字符时进行过滤/搜索栏搜索？
[英]How to make filter/search bar search only when 3 characters has been entered?
如何在HTML表格中仅搜索与搜索栏中输入内容完全匹配的内容？
[英]How can I search an HTML table for only an exact match of my input in the search bar?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.