Toepassing 1: gemeentelijst filteren (uitgebreide versie)

★ Open selectors/toep_gemeentelijst_2.html.

De code in deze pagina is identiek aan de code uit voorgaand hoofdstuk. Om het probleem met hoofd- en kleine letters op te lossen, gaan we als volgt te werk: zet zowel de zoekterm als de gemeentenamen eerst om naar kleine letters en maak pas daarna de vergelijking.

★ Voeg bovenaan het script volgende code toe:

$(function() {
    // voeg data-g aan elke li-tag toe
    $('main li').each(function(){
        $(this).attr('data-g', $(this).text().toLowerCase());
    });
    ...
});

Eerst doorlopen we elke li-tag en wordt via $(this).text().toLowerCase() de gemeentenaam omgezet naar kleine letters. In plaats van de naam zelf te wijzigen, gaan we de nieuwe naam als attribuut toevoegen aan de li-tag. De methode attr() komt later nog uitgebreid aan bod, maar de syntax is eenvoudig attr(attribuut, waarde). Voor de li-tag rond de gemeente Geel is dit het resultaat: <li data-g="geel"><a ... >Geel</a></li>

★ Pas het reeds bestaande script op lijn 3 en lijn 5 aan zoals hieronder aangegeven. ★ Test het resultaat in een browser.

...
$('#filter').keyup(function(){
    var filter = $(this).val().toLowerCase();
    $('main li').hide();
    $('main li[data-g*="' + filter + '"]').show();
    teller();
});
...

De variabele filter bevat vanaf nu (lijn 3) de gemeentenaam in kleine letters. De oude methode contains() gaan we nu niet meer gebruiken. De aangepaste selector (lijn 5) controleert of het attribuut data-g de waarde van filter bevat.

Naast het zoekveld komt het aantal zichtbare gemeentenamen. Hiervoor gaan we een nieuwe functie teller() aanmaken. Bij elke filtering wordt deze functie opgeroepen.

★ Voeg de tellerfunctie toe:

// tellerfunctie
function teller() {
    var teller = $('main li:visible').length;
    $('#zichtbaar').text(teller);
}
// start de teller bij het openen van de pagina
teller();

De tellerfunctie zoekt alle zichtbare li-tags. Het aantal kan u opvragen met de (JavaScript) eigenschap length. Deze waarde wordt als tekst in de span-tag #zichtbaar getoond.

Door achter de tellerfunctie dadelijk teller() op te roepen, wordt bij het openen van de pagina de tellerfunctie dadelijk uitgevoerd.

★ Test de pagina in een browser. ★ Maak het tekstveld met de backtoets leeg. ★ Pas het script aan. ★ Test het resultaat in een browser.

Bij een leeg tekstveld is de variabele filter leeg. Aangezien geen enkele li-tag deze lege filter(-variabele) bevat in zijn attribuut data-g, zullen alle gemeentenamen - verborgen door $('li').hide() – onzichtbaar blijven. Dit kunnen we makkelijk oplossen door eerst de inhoud van filter te controleren. Indien filter geen waarde bevat, tonen we altijd de volledige lijst.

$('#filter').keyup(function(){
    var filter = $(this).val().toLowerCase();
    if(filter != '') {      // filter bevat een waarde
        $('main li').hide();
        $('main li[data-g*="' + filter + '"]').show();
    } else {                // filter is leeg
        $('main li').show();
    }
    teller();       
});

Filter op KA