Zoeken op je pagina met Jets.js
Stel: je hebt een website met daaraan gekoppeld een databases met Naam-Adres-Woonlaats-gegevens. Door een zoekopdracht wordt een lijst met namen op het scherm gezet, in een soort tekstvak met een scrollbar. Daarin wil je verder zoeken. Daarvoor kun je een filter inzetten, dat de niet-gezochte namen verwijdert op basis van wat je intikt in een invoerveld. Jets.js is zo'n filter.
Hieronder zie je een lijstje met (verzonnen) namen met daarbij een invoerveld. Als je een deel van een naam intikt, wordt
een deel van de namen uitgefilterd; die verdwijnen uit de lijst.
Op deze pagina wordt uitgelegd hoe je dit kunt toepassen in je eigen website. De code van het voorbeeld kun je downloaden
om zelf te gebruiken.
- Jan Pietersen
- Piet Klaassen
- Klaas Hansen
- Hans Petersen
- Peter Paulsen
- Paul Bertsen
- Bert Stevensen
- Steven Tomsen
- Tom Bensen
- Ben Marksen
- Mark Jansen
- Besproken worden:
- De oorsprong van het script.
- De werking van het script, in globale termen.
- Inbouwen in je eigen site.
- De oorsprong van het script
- Dit script is ontwikkeld door Denis Lukov, een ontwikkelaar uit de Oekraïne. De website over dit script is jets.js.org. Je vindt daar een redelijk uitgebreide handleiding, die helaas niet overal even duidelijk is. Als eerste start is dit –eenvoudige– voorbeeld een goed beginpunt.
- Je kunt het script downloaden van GitHub. Klik op de groene knop "Clone or download" en download de gezipte file Jets.js-master.zip.
- De zip-file bevat een aantal bestanden waarvan alleen jets.js en jets.min.js nodig zijn om het zoekfilter
in te bouwen in je website. De rest kun je vergeten, tenzij je met bower en/of node.js
werkt. Dat valt echter buiten het bestek van deze website.
- De werking van het script
- De code in zijn eenvoudigste vorm bestaat uit een tweetal elementen, elke met een uniek id. Om het netjes op deze pagina weer te geven zijn die gevat in een <div>-tag, die de boven- en ondermarge en de linker en rechter marge instellen.
- De twee id's worden met een stukje JavaScript gekoppeld aan het object Jets, wat de feitelijke zoekroutine is.
- De lijst wordt vergeleken met wat je in het zoekveld typt; dat is het filter. Alle regels die niet aan het filter voldoen krijgen de CSS-eigenschap display:none.
- Bij elke wijziging van het zoekveld wordt de lijst nagekeken. Dat gaat razendsnel, zodat de lijst "realtime" wordt aangepast.
- De twee id's worden toegekend aan:
- Het zoekveld (searchTag). Hier: id="#jetsSearch".
- De lijst (contentTag). Hier: id="#jetsContent".
- Je bent niet beperkt tot ongeordende lijsten. Je kunt ook in een reeks <div>-tags laten zoeken. Het kan ook
in een <table>. Je kunt daar zelfs de kolom opgeven waarin moet worden gezocht.
Voor een volledig overzicht van de mogelijkheden wordt verwezen naar de website jets.js.org. - Inbouwen in je eigen site
- Download bestanden zoals hierboven is genoemd. Link een van de files jets.js of jets.min.js in de <HEAD> (De laatste is kleiner, dus laadt sneller). Je hoeft daaraan niets te veranderen om het te gebruiken.
- Zet de HTML-code in de <BODY>, op de plaats waar het zoekveld en de lijst moeten verschijnen.
- Zet het JavaScript dat het Jets-object maakt na de code voor het zoekveld en de lijst (De bijbehorende id's moeten bestaan voordat er aan gerefereerd kan worden).
- Het zoekveld en de lijst zijn beide apart opgemaakt met behulp van CSS die in de <HEAD> staat. Met name de lijst
vraagt wat aandacht omdat de pagina-opmaak gemakkelijk verstoord wordt als de lijst erg lang is.
- Tenslotte:
- Het bovenstaande voorbeeld is heel basic. Jets.js kan veel meer.
- Bij een praktijk-toepassing zul je de benodigde data vaak van een server laten komen, tenzij het gaat om statische (dus niet veranderende) data. Dan is het te overwegen alles in de pagina zelf te programmeren, zoals in dit voorbeeld.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<script src="jets.min.js"></script>
<style>
#jetsSearch {
font-family:Verdana, Arial, sans-serif;
color:navy; }
#jetsContent { position:relative; width:180px; height:100px;
overflow-x:hidden; overflow-y:scroll;
background-color:#ffffd8;
border:1px solid navy;
color:maroon;
list-style-type:none; }
</style>
(Zet dit in de <BODY>, op de plaats waar de lijst met het zoekveld moet verschijnen).
<div style="margin:20px 100px">
<input type="search" id="jetsSearch">
<ul id="jetsContent">
<li>Jan Pietersen</li>
<li>Piet Klaassen</li>
<li>Klaas Hansen</li>
<li>Hans Petersen</li>
<li>Peter Paulsen</li>
<li>Paul Bertsen</li>
<li>Bert Stevensen</li>
<li>Steven Tomsen</li>
<li>Tom Bensen</li>
<li>Ben Marksen</li>
<li>Mark Jansen</li>
</ul>
</div>
<script>
var jets = new Jets({
searchTag: '#jetsSearch',
contentTag: '#jetsContent'
});
</script>
Downloaden:
Druk op de knop:
File: voorb450.zip, 775 bytes.
