用於制作搜索欄的 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.