Zoekfunctie met CSS3 en javascript

1 Oktober 2013, Luuk Barten
CSS3 en javascript search

Zoekfuncties in websites worden meestal op de server uitgevoerd middels een PHP script of een database query waarvan het resultaat op de pagina wordt weergegeven.

Het volgende client side voorbeeld maakt gebruik van de CSS3 selectors ":not()" en "[attr*=]" en een klein stukje javascript. Het idee is dat het javascript een CSS regel dynamisch blijft updaten. Deze CSS regel stelt voor HTML elementen waarvan de inhoud van het data attribuut niet voldoet aan de ingevoerde tekst de display eigenschap in op "none".

Kijk op redo the web voor een voorbeeld en tutorial hoe je deze clientside search kan toevoegen aan je eigen website.

Weblog

Onze mening over over maatwerk webdesign en webdevelopment.

Contact

Neem contact op met Elicit voor vragen, vrijblijvend advies of het aanvragen van een offerte.

Elicit
Stationsstraat 35
5281GA Boxtel

+31 (0)411-671519
info@elicit.nl