> For the complete documentation index, see [llms.txt](https://1itf.gitbook.io/jquery/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://1itf.gitbook.io/jquery/5-selectie-verfijnen-traversing/toepassing-1-gemeentelijst-filteren-uitgebreide-versie.md).

# Toepassing 1: gemeentelijst filteren (uitgebreide versie)

{% hint style="success" %}
★ Open **selectors/toep\_gemeentelijst\_2.html**.
{% endhint %}

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.

{% hint style="success" %}
★ Voeg bovenaan het script volgende code toe:
{% endhint %}

```javascript
$(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>`

{% hint style="success" %}
★ Pas het reeds bestaande script op **lijn 3** en **lijn 5** aan zoals hieronder aangegeven.\
★ Test het resultaat in een browser.
{% endhint %}

```javascript
...
$('#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.

{% hint style="success" %}
★ Voeg de tellerfunctie toe:
{% endhint %}

```javascript
// 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.

{% hint style="success" %}
★ Test de pagina in een browser.\
★ Maak het tekstveld met de backtoets leeg.\
★ Pas het script aan.\
★ Test het resultaat in een browser.
{% endhint %}

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.

```javascript
$('#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](https://1796208354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9o5lSfK7vREgzWjB4s%2F-LAKDYcgG_vMAXcOYUkR%2F-LAKDac6T_JJtD79n-LR%2Fgemeente3.png?generation=1523995800179858\&alt=media)