2
votes

Liste déroulante consultable

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


0 commentaires

3 Réponses :


0
votes

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();
    
    }
}


1 commentaires

Marquer ceci comme réponse si c'est ce que vous cherchiez s'il vous plaît



0
votes

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`
  
}


0 commentaires

2
votes

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);
}


2 commentaires

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 :-)