J'ai une liste d'éléments dans une liste déroulante qui peut être filtrée à l'aide d'une recherche dans la liste déroulante.
function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } function filterFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); div = document.getElementById("myDropdown"); a = div.getElementsByTagName("a"); for (i = 0; i < a.length; i++) { txtValue = a[i].textContent || a[i].innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { a[i].style.display = ""; } else { a[i].style.display = "none"; } } }
Et le js ...
<div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Please select</button> <div id="myDropdown" class="dropdown-content"> <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()"> <a href="#">Abyssinian</a> <a href="#">American Bobtail</a> <a href="#">Amercian Curl</a> </div> </div>
https://codepen.io/RSA_James/pen/LYZqYym
Ce que je recherche, c'est un moyen d'afficher un message si un utilisateur commence à rechercher quelque chose et qu'il n'y a pas de correspondance.
Toute aide appréciée! Merci
3 Réponses :
Jetez un œil ici, ajoutez un nouveau code et créez un nouvel élément lorsqu'il n'y a pas de résultat trouvé.
<h2>Search/Filter Dropdown</h2> <p>Click on the button to open the dropdown menu, and use the input field to search for a specific dropdown link.</p> <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Please select</button> <div id="myDropdown" class="dropdown-content"> <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()"> <a href="#">Abyssinian</a> <a href="#">American Bobtail</a> <a href="#">Amercian Curl</a> <a href="#">American Longhair</a> <a href="#">American Shorthair</a> <a href="#">American Wirehair</a> <a href="#">Angora</a> <a href="#">Asian</a> <a href="#">Asian Blue</a> <a href="#">Balinese</a> <a href="#">Bengal</a> <a href="#">Bengal Tiger</a> <a href="#">Bicolour</a> <a href="#">Bicolour Longhair</a> <a href="#">British Bicolour Shorthair</a> <a href="#">Birman</a> <a href="#">Black</a> <a href="#">Black and White</a> <a href="#">Black and White Longhair</a> <a href="#">Black and White Shorthair</a> <a href="#">Black Longhair</a> <a href="#">Black Shorthair British Black</a> </div> </div>
.dropbtn { background-color: #e3e3e3; background-image: url('https://image.flaticon.com/icons/png/512/25/25243.png'); background-position: 270px center; background-repeat: no-repeat; background-size: 5%; color: #333 ; border: 1px solid red; border-radius: 5px; min-width: 300px; padding: 16px; font-size: 16px; border: none; cursor: pointer; text-align: left; } .dropbtn:hover, .dropbtn:focus { background-color: #d3d3d3; } #myInput { box-sizing: border-box; background-image: url('https://www.w3schools.com/howto/searchicon.png'); background-position: 14px 12px; background-repeat: no-repeat; font-size: 16px; padding: 14px 20px 12px 45px; border: none; border-bottom: 1px solid #ddd; width: 100%; } #myInput:focus {outline: 3px solid #ddd;} .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f6f6f6; min-width: 230px; width: 100%; max-height: 260px; overflow: auto; border: 1px solid #ddd; z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown a:hover {background-color: #ddd;} .show {display: block;}
function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } function filterFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); div = document.getElementById("myDropdown"); a = div.getElementsByTagName("a"); var empty = document.createElement("a"); empty.classList.add("empty"); empty.innerHTML="No Reault Found..."; var emptyVisiable= true; for (i = 0; i < a.length; i++) { txtValue = a[i].textContent || a[i].innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { a[i].style.display = ""; emptyVisiable = false; } else { a[i].style.display = "none"; } } if (emptyVisiable) div.appendChild(empty); else { empty= div.querySelector(".empty") if (empty!== null) empty.remove(); } }
Marquer ceci comme réponse si c'est ce que vous cherchiez s'il vous plaît
vous pouvez accomplir cela en ajoutant une balise ap pour l'erreur dans le html et un compteur qui s'incrémente à chaque fois qu'aucune res n'est trouvée dans la boucle de votre fonction de filtrage suivie d'un if à la fin qui vérifie si le compteur === le longueurs de liens
<div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Please select</button> <div id="myDropdown" class="dropdown-content"> <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()"> <p id="noResFound"></p> <a href="#">Abyssinian</a> <a href="#">American Bobtail</a> <a href="#">Amercian Curl</a> </div> </div>
function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } function filterFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); div = document.getElementById("myDropdown"); a = div.getElementsByTagName("a"); let count = 0; for (i = 0; i < a.length; i++) { txtValue = a[i].textContent || a[i].innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { a[i].style.display = ""; } else { count++; a[i].style.display = "none"; } } if(count == a.length ) displayNoResults(filter); } function displayNoResults(searchTxt) { let noResFound = document.getElementById("noResFound"); noResFound.style.display = "block" noResFound.innerHTML = `No results for "${searchTxt}" were found` }
ES6 réduit un peu le code:
<div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Please select</button> <div id="myDropdown" class="dropdown-content"> <input type="text" placeholder="Search.." id="myInput" oninput="filterFunction(this.value)"> <a href="#">Abyssinian</a> <a href="#">American Bobtail</a> <a href="#">Amercian Curl</a> <span class="err hide">Nothing found</span> </div> </div>
.hide { display: none; } .err { color: red; }
function filterFunction(sText) { [...document.querySelectorAll('#myDropdown a')].forEach(elA => elA.classList.toggle('hide', !new RegExp(sText, 'gi').test(elA.textContent))); document.querySelector('#myDropdown span.err').classList.toggle('hide', document.querySelectorAll('#myDropdown a:not(.hide)').length); }
c'est essentiellement la même chose que ma réponse mais je dois dire que votre solution est tellement plus douce sur le plan syntaxique!
@CouchCode: les innovations JS font des merveilles! Il ne reste plus qu'à rattraper la technologie :-)