Hoe te maken: zoekmenu

Leer hoe je een zoekmenu maakt met JavaScript om links te filteren.

Maak een zoekmenu aan

Stap 1 - Voeg HTML toe:

<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Zoek..." title="Typ een categorie in">
<ul id="myMenu">
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">JavaScript</a></li>
  <li><a href="#">PHP</a></li>
  <li><a href="#">Python</a></li>
  <li><a href="#">jQuery</a></li>
  <li><a href="#">SQL</a></li>
  <li><a href="#">Bootstrap</a></li>
  <li><a href="#">Node.js</a></li>
</ul>

Opmerking:In deze demonstratie gebruiken we href="#"We hebben geen koppelpagina's. In de praktijk zou dit een echte URL moeten zijn die verwijst naar een specifieke pagina.

Tweede stap - Voeg CSS toe:

Stel de stijl van het zoekvak en het navigatiemenu in:

/* Stijl van zoekvak instellen */
#mySearch {
  breedte: 100%;
  lettergrootte: 18px;
  padding: 11px;
  rand: 1px vast #ddd;
}
/* Stijl van navigatiemenu instellen */
#myMenu {
  lijststijltype: none;
  padding: 0;
  marge: 0;
}
/* Stijl van navigatielinks instellen */
#myMenu li a {
  padding: 12px;
  tekstdecoratie: none;
  kleur: zwart;
  weergave: blok;
}
#myMenu li a:hover {
  achtergrondkleur: #eee;
}

Derde stap - Voeg JavaScript toe:

<script>
function myFunction() {
  // Variabelen declareren
  var input, filter, ul, li, a, i;
  input = document.getElementById("mySearch");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myMenu");
  li = ul.getElementsByTagName("li");
  // Alle lijstitems doorlopen en die die niet overeenkomen met de zoekopdracht verbergen
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}
</script>

Probeer het zelf

Tip:Als je een hoofdlettergevoelige zoekopdracht wilt uitvoeren, verwijder dan toUpperCase().

Gerelateerde pagina's

Handleiding:Hoe een tabel te filteren

Handleiding:How to filter list