Toepassing 1: gemeentelijst filteren (basisversie)

★ Open selectors/toep_gemeentelijst_1.html.

De pagina bevat een lijst van alle Vlaamse gemeenten. Het zoekveld bovenaan de pagina filtert de lijst met gemeentenamen.

<body>
...
<input type="text" id="filter" ... ">
...
<ul>
    <li><a ... >Aalst</a></li>
    <li><a ... >Aalter</a></li>
    <li><a ... >Aarschot</a></li>
    <li><a ... >Aartselaar</a></li>
</ul>
...
</body>

★ Pas het script als volgt aan.

$(function() {
    $('#filter').keyup(function(){ 
        var filter = $(this).val();
        $('main li').hide();
        $('main li:contains(' + filter + ')').show();
    });
});

Telkens u in het tekstveld een letter intypt, wordt het event keyup() geactiveerd. De waarde uit het tekstveld komt in de variabele filter terecht. Indien u bijvoorbeeld ka invult, wordt getest of dit woord binnen een li-tag voorkomt. De selectoren op lijn 4 en 5 bepalen of de li-tag zichtbaar of onzichtbaar wordt.

Merk op dat op lijn 5 de variabele dynamisch in de selector wordt verwerkt. Voor het zoekwoord ka wordt dit: $('li:contains(ka)').show();

Zoeken op Ka of op ka een toont een totaal verschillend resultaat. De zoekfunctie is namelijk hoofdlettergevoelig. Met de selecties uit dit hoofdstuk kunnen we dit nog niet oplossen. In het volgend hoofdstuk gaan we dit probleem wegwerken door de selecties verder te verfijnen.

PreviousZichtbaarheidsfilters NextToepassing 2: openingsuren markeren

Last updated 6 years ago