# Toepassing 1: gemeentelijst filteren (basisversie)
{% hint style="success" %}
★ Open **selectors/toep\_gemeentelijst\_1.html**.
{% endhint %}
De pagina bevat een lijst van alle Vlaamse gemeenten.\
Het zoekveld bovenaan de pagina filtert de lijst met gemeentenamen.
```markup
...
...
...
```
{% hint style="success" %}
★ Pas het script als volgt aan.
{% endhint %}
```javascript
$(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.
