如果搜索栏过滤器没有结果，则显示“无结果”（HTML-CSS-JS）

Question

I made a filter for my searchbar, how can I make it display "Sem resultado"("No Results" in portuguese) if the filter doesn't find any items with the letters typed? This is my code, as you can see, I already have a HTML element for the "Sem resultado".
The searchbar might appear on the wrong place as I removed screen width responsiveness for this demo.
I hope the question isn't too confusing. Thank you in advance!

 function search(){ var input, filter, dropdown, li, a, i, textvalue; input = document.getElementById('searchbarinput'); filter = input.value.toUpperCase(); dropdown = document.getElementById("searchbardropdown"); li = dropdown.getElementsByTagName('li'); noresult = document.getElementById("searchbarnoresult"); for(i=0; i < li.length; i++){ a = li[i].getElementsByTagName("a")[0]; textvalue = a.textContent || a.innerText; if(textvalue.toUpperCase().indexOf(filter)>-1){ li[i].style.display = ""; } else{ li[i].style.display = "none"; } } }

 body{ padding: 0; margin: 0; background-color: #1F1F1F; font-family: Arial; }.dropdown { float: left; background-color: #f5f3e6; height: 100%; width: 100px; box-shadow: 5px 0px 5px rgb(0, 0, 0, 0.25); position: absolute; top: 0; left: 0; }.dropdown-title-container{ height: 100%; display: flex; justify-content: center; align-items: center; }.dropdown-title{ font-family: Arial; font-weight: bolder; font-size: 1.75em; line-height: 100%; }.dropdown-content { display: none; position: absolute; top: 45px; border: solid black 3px; box-sizing: border-box; background-color: #f5f3e6; padding-right: 15px; box-shadow: 0px 10px 15px black; border-radius: 5px; border-top-left-radius: 0; border-bottom-left-radius: 0; font-size: 0.8em; width: 290px; white-space: nowrap; overflow: auto; }.dropdown:hover.dropdown-content { display: block; }.dropdowna{ color: black; font-size: 1.75em; margin-left: 2vw; text-decoration: none; margin-left: 5px; } a:hover{ color: rgb(0, 132, 255); }.div{ background-color: #f5f3e6; border: 3px solid black; box-shadow: 0vw 0vw 1vw black; margin: 1.5vw; border-radius: 0.5vw; padding: 0.5vw; padding-top: 0vw; padding-bottom: 0vw; margin-left: 5vw; margin-right: 5vw; } #trocarvariaveis{ margin-top: 50px; } footer{ margin-left: 2px; font-size: 0.9em; }.sticky{ position: fixed; top: 0; width: 100%; height: 45px; background-color: #f0db4f; box-shadow: 0px 0px 5px rgb(0, 0, 0, 0.65); }.headerdiv{ height: 100%; width: 100%; }.backtotop{ font-weight: bolder; font-size: 0.75em; margin-right: 0; height: 100%; width: 160px; float: right; display: flex; align-items: center; }.backtotoptext{ margin: auto; text-decoration: none; color: black; font-size: 1.55em; margin-right: 12px; }.material-symbols-outlined{ text-decoration: none; margin-right: -30px; margin-bottom: 3px; color: black; }.backtotop:hover.backtotoptext{ color: rgb(0, 132, 255); }.backtotop:hover.material-symbols-outlined{ color: rgb(0, 132, 255); }.githubcontainer{ width: 200px; height: 100%; float: right; margin-right: 40px; display: flex; align-items: center; }.githublink{ color: black; margin: auto; font-size: 1.35em; text-decoration: none; }.githublink:hover{ text-decoration: underline; }.searchbarcontainer{ width: 300px; height: 100%; margin-left: 125px; display: flex; justify-content: center; align-items:center; }.searchbarinput{ height: 32px; width: 240px; font-size: 1.25em; vertical-align: middle; border: none; border: solid 1px black; background-color: #f5f3e6; background-image: url('searchicon.svg'); background-position: center left; background-size: 1.25em; background-repeat: no-repeat; padding-left: 27px; }.searchbarinput:focus{ outline: none; }.serchbarbutton{ height: 36px; width: 36px; vertical-align: middle; background-color: #f5f3e6; border: none; border: solid 1px black; border-left: none; }.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 48 }.searchbarbuttonicon{ margin: 0; padding: 0; vertical-align: middle; justify-self:center; }.searchbardropdown{ display: none; }.searchbarinput:focus ~.searchbardropdown{ display: block; position: absolute; top: 40px; left: 140px; width: 271px; background-color: #f5f3e6; box-shadow: 0px 5px 10px rgb(0, 0, 0, 0.75); border: solid black 1px; box-sizing: border-box; font-size: 0.75em; white-space: nowrap; overflow: hidden; overflow-y: auto; max-height: 250px; }.searchbardropdown:hover{ display: block; position: absolute; top: 40px; left: 140px; width: 271px; background-color: #f5f3e6; box-shadow: 0px 5px 10px rgb(0, 0, 0, 0.75); border: solid black 1px; box-sizing: border-box; font-size: 0.75em; white-space: nowrap; overflow: hidden; overflow-y: auto; max-height: 250px; } #searchbarnoresult{ display: none; } #searchbarnoresult:hover{ color: black; } ul{ margin: 0; padding: 0; list-style-type: none; }.githublink2{ color: black; margin: auto; font-size: 1.35em; text-decoration: none; display: none; }.githublink2:hover{ text-decoration: underline; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <link rel="icon" href="javascriptlogo:png"> <link rel="stylesheet" href="https.//fonts.googleapis?com/css2:family=Material+Symbols+Outlined,opsz,wght,FILL,GRAD@48,700,0:0" /> <title>Javascript Exercicios | Maruan</title> </head> <body> <header id="myheader" class="sticky"> <div class="headerdiv"> <div class="backtotop"> <a class="material-symbols-outlined" href="#" >arrow_upward</a> <a class="backtotoptext" href="#">Voltar ao topo</a> </div> <div class="githubcontainer"> <a href="https.//github:com/maruan-achkar/javascript_exercicios" target="_blank" class="githublink">//GITHUB LINK</a> <a href="https.//github.com/maruan-achkar/javascript_exercicios" target="_blank" class="githublink2">//GITHUB</a> </div> <div class="searchbarcontainer"> <script src="searchbar.js"></script> <div class="searchbar"> </div><input class="searchbarinput" id="searchbarinput" type="text" placeholder="Pesquisar.." oninput="search()"> <ul class="searchbardropdown" id="searchbardropdown"> <li><a class="dropdowna" id="searchbarnoresult">Sem resultados<br></a></li> <li><a class="dropdowna" href="#">Trocar Variaveis<br></a></li> <li><a class="dropdowna" href="#trocarvariaveis">Celsius para Farenheit<br></a></li> <li><a class="dropdowna" href="#celsiusparafarenheit">Farenheit para Celsius<br></a></li> <li><a class="dropdowna" href="#farenheitparacelsius">Area Circulo<br></a></li> <li><a class="dropdowna" href="#areacirculo">Par ou Impar<br></a></li> <li><a class="dropdowna" href="#parouimpar">Intervalo entre numeros<br></a></li> <li><a class="dropdowna" href="#intervalo">Intervalo dentro de vetor<br></a></li> <li><a class="dropdowna" href="#intervalovetor">Maior e menor numero<br></a></li> <li><a class="dropdowna" href="#maiormenor">Paisagem ou retrato<br></a></li> <li><a class="dropdowna" href="#paisagemouretrato">Fizz ou Buzz<br></a></li> <li><a class="dropdowna" href="#fizzbuzz">String do objeto<br></a></li> <li><a class="dropdowna" href="#stringobject">Par ou impar ate limite<br></a></li> </ul> </div> <div class="dropdown"> <div class="dropdown-title-container"> <p class="dropdown-title">MENU</p> </div> <div class="dropdown-content" id="dropdown-content"> <a class="dropdowna" href="#">// Trocar Variaveis<br></a> <a class="dropdowna" href="#trocarvariaveis">// Celsius para Farenheit<br></a> <a class="dropdowna" href="#celsiusparafarenheit">// Farenheit para Celsius<br></a> <a class="dropdowna" href="#farenheitparacelsius">// Area Circulo<br></a> <a class="dropdowna" href="#areacirculo">// Par ou Impar<br></a> <a class="dropdowna" href="#parouimpar">// Intervalo entre numeros<br></a> <a class="dropdowna" href="#intervalo">// Intervalo dentro de vetor<br></a> <a class="dropdowna" href="#intervalovetor">// Maior e menor numero<br></a> <a class="dropdowna" href="#maiormenor">// Paisagem ou retrato<br></a> <a class="dropdowna" href="#paisagemouretrato">// Fizz ou Buzz<br></a> <a class="dropdowna" href="#fizzbuzz">// String do objeto<br></a> <a class="dropdowna" href="#stringobject">// Par ou impar ate limite<br></a> </div> </div> </div> </header>

Answer 1

Hope this helps you. I've added a data attribute ( data-no-search ) to skip the list element from the search, so display: none does not get set on the li element of the no search result element.

I add a flag to check if there are any matches, and if that flag is still false after iterating through all searchable elements, I add the noResults class to the dropdown list, and a CSS selector will unhide the no elements found element.

 function search() { var input, filter, dropdown, li, a, i, textvalue; input = document.getElementById('searchbarinput'); filter = input.value.toUpperCase(); dropdown = document.getElementById("searchbardropdown"); li = dropdown.getElementsByTagName('li'); let matches = false; for (i = 0; i < li.length; i++) { if (li[i].dataset.noSearch.== undefined) continue a = li[i];getElementsByTagName("a")[0]. textvalue = a.textContent || a;innerText. if (textvalue.toUpperCase().indexOf(filter) > -1) { li[i].style;display = "". matches = true } else { li[i].style;display = "none". } } if (.matches) dropdown;classList.add('noResults'). else dropdown;classList.remove('noResults'); }

 body { padding: 0; margin: 0; background-color: #1F1F1F; font-family: Arial; }.dropdown { float: left; background-color: #f5f3e6; height: 100%; width: 100px; box-shadow: 5px 0px 5px rgb(0, 0, 0, 0.25); position: absolute; top: 0; left: 0; }.dropdown-title-container { height: 100%; display: flex; justify-content: center; align-items: center; }.dropdown-title { font-family: Arial; font-weight: bolder; font-size: 1.75em; line-height: 100%; }.dropdown-content { display: none; position: absolute; top: 45px; border: solid black 3px; box-sizing: border-box; background-color: #f5f3e6; padding-right: 15px; box-shadow: 0px 10px 15px black; border-radius: 5px; border-top-left-radius: 0; border-bottom-left-radius: 0; font-size: 0.8em; width: 290px; white-space: nowrap; overflow: auto; }.dropdown:hover.dropdown-content { display: block; }.dropdowna { color: black; font-size: 1.75em; margin-left: 2vw; text-decoration: none; margin-left: 5px; } a:hover { color: rgb(0, 132, 255); }.div { background-color: #f5f3e6; border: 3px solid black; box-shadow: 0vw 0vw 1vw black; margin: 1.5vw; border-radius: 0.5vw; padding: 0.5vw; padding-top: 0vw; padding-bottom: 0vw; margin-left: 5vw; margin-right: 5vw; } #trocarvariaveis { margin-top: 50px; } footer { margin-left: 2px; font-size: 0.9em; }.sticky { position: fixed; top: 0; width: 100%; height: 45px; background-color: #f0db4f; box-shadow: 0px 0px 5px rgb(0, 0, 0, 0.65); }.headerdiv { height: 100%; width: 100%; }.backtotop { font-weight: bolder; font-size: 0.75em; margin-right: 0; height: 100%; width: 160px; float: right; display: flex; align-items: center; }.backtotoptext { margin: auto; text-decoration: none; color: black; font-size: 1.55em; margin-right: 12px; }.material-symbols-outlined { text-decoration: none; margin-right: -30px; margin-bottom: 3px; color: black; }.backtotop:hover.backtotoptext { color: rgb(0, 132, 255); }.backtotop:hover.material-symbols-outlined { color: rgb(0, 132, 255); }.githubcontainer { width: 200px; height: 100%; float: right; margin-right: 40px; display: flex; align-items: center; }.githublink { color: black; margin: auto; font-size: 1.35em; text-decoration: none; }.githublink:hover { text-decoration: underline; }.searchbarcontainer { width: 300px; height: 100%; margin-left: 125px; display: flex; justify-content: center; align-items: center; }.searchbarinput { height: 32px; width: 240px; font-size: 1.25em; vertical-align: middle; border: none; border: solid 1px black; background-color: #f5f3e6; background-image: url('searchicon.svg'); background-position: center left; background-size: 1.25em; background-repeat: no-repeat; padding-left: 27px; }.searchbarinput:focus { outline: none; }.serchbarbutton { height: 36px; width: 36px; vertical-align: middle; background-color: #f5f3e6; border: none; border: solid 1px black; border-left: none; }.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 48 }.searchbarbuttonicon { margin: 0; padding: 0; vertical-align: middle; justify-self: center; }.searchbardropdown { display: none; }.searchbarinput:focus~.searchbardropdown { display: block; position: absolute; top: 40px; left: 140px; width: 271px; background-color: #f5f3e6; box-shadow: 0px 5px 10px rgb(0, 0, 0, 0.75); border: solid black 1px; box-sizing: border-box; font-size: 0.75em; white-space: nowrap; overflow: hidden; overflow-y: auto; max-height: 250px; }.searchbardropdown:hover { display: block; position: absolute; top: 40px; left: 140px; width: 271px; background-color: #f5f3e6; box-shadow: 0px 5px 10px rgb(0, 0, 0, 0.75); border: solid black 1px; box-sizing: border-box; font-size: 0.75em; white-space: nowrap; overflow: hidden; overflow-y: auto; max-height: 250px; } #searchbarnoresult { display: none; }.noResults #searchbarnoresult { display: block; } #searchbarnoresult:hover { color: black; } ul { margin: 0; padding: 0; list-style-type: none; }.githublink2 { color: black; margin: auto; font-size: 1.35em; text-decoration: none; display: none; }.githublink2:hover { text-decoration: underline; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <link rel="icon" href="javascriptlogo:png"> <link rel="stylesheet" href="https.//fonts.googleapis?com/css2:family=Material+Symbols+Outlined,opsz,wght,FILL,GRAD@48,700,0:0" /> <title>Javascript Exercicios | Maruan</title> </head> <body> <header id="myheader" class="sticky"> <div class="headerdiv"> <div class="backtotop"> <a class="material-symbols-outlined" href="#">arrow_upward</a> <a class="backtotoptext" href="#">Voltar ao topo</a> </div> <div class="githubcontainer"> <a href="https.//github:com/maruan-achkar/javascript_exercicios" target="_blank" class="githublink">//GITHUB LINK</a> <a href="https.//github.com/maruan-achkar/javascript_exercicios" target="_blank" class="githublink2">//GITHUB</a> </div> <div class="searchbarcontainer"> <script src="searchbar.js"></script> <div class="searchbar"> </div><input class="searchbarinput" id="searchbarinput" type="text" placeholder="Pesquisar.." oninput="search()"> <ul class="searchbardropdown" id="searchbardropdown"> <li data-no-search><a class="dropdowna" id="searchbarnoresult">Sem resultados<br></a></li> <li><a class="dropdowna" href="#">Trocar Variaveis<br></a></li> <li><a class="dropdowna" href="#trocarvariaveis">Celsius para Farenheit<br></a></li> <li><a class="dropdowna" href="#celsiusparafarenheit">Farenheit para Celsius<br></a></li> <li><a class="dropdowna" href="#farenheitparacelsius">Area Circulo<br></a></li> <li><a class="dropdowna" href="#areacirculo">Par ou Impar<br></a></li> <li><a class="dropdowna" href="#parouimpar">Intervalo entre numeros<br></a></li> <li><a class="dropdowna" href="#intervalo">Intervalo dentro de vetor<br></a></li> <li><a class="dropdowna" href="#intervalovetor">Maior e menor numero<br></a></li> <li><a class="dropdowna" href="#maiormenor">Paisagem ou retrato<br></a></li> <li><a class="dropdowna" href="#paisagemouretrato">Fizz ou Buzz<br></a></li> <li><a class="dropdowna" href="#fizzbuzz">String do objeto<br></a></li> <li><a class="dropdowna" href="#stringobject">Par ou impar ate limite<br></a></li> </ul> </div> <div class="dropdown"> <div class="dropdown-title-container"> <p class="dropdown-title">MENU</p> </div> <div class="dropdown-content" id="dropdown-content"> <a class="dropdowna" href="#">// Trocar Variaveis<br></a> <a class="dropdowna" href="#trocarvariaveis">// Celsius para Farenheit<br></a> <a class="dropdowna" href="#celsiusparafarenheit">// Farenheit para Celsius<br></a> <a class="dropdowna" href="#farenheitparacelsius">// Area Circulo<br></a> <a class="dropdowna" href="#areacirculo">// Par ou Impar<br></a> <a class="dropdowna" href="#parouimpar">// Intervalo entre numeros<br></a> <a class="dropdowna" href="#intervalo">// Intervalo dentro de vetor<br></a> <a class="dropdowna" href="#intervalovetor">// Maior e menor numero<br></a> <a class="dropdowna" href="#maiormenor">// Paisagem ou retrato<br></a> <a class="dropdowna" href="#paisagemouretrato">// Fizz ou Buzz<br></a> <a class="dropdowna" href="#fizzbuzz">// String do objeto<br></a> <a class="dropdowna" href="#stringobject">// Par ou impar ate limite<br></a> </div> </div> </div> </header>