<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Javascript Search</title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
body {
background-color: #E3E3E3;
}
#Holder {
width: 600px;
margin: 100px auto;
}
.header {
background-color: #DEF1FF;
padding: 25px;
}
#search {
font-size: 16px;
width: 548px;
}
.content {
background-color: #fff;
min-height: 300px;
padding: 15px 25px;
}
.content ul {
margin-left: 20px;
}
</style>
<script type="text/javascript" charset="utf-8">
//Deze functie weghalen als je prototype/jquery hebt
function $(id) {
return(document.getElementById(id));
}
var searchItems = "Aalbes, Aardbei, Aardbeiboom (Arbutus), Aardbeiguave, Abrikoos, Acerola, Afrikaanse baobab, Aki, Alibertia, Ambarella, Amerikaanse mammi-appel, Amerikaanse persimmon, Ananas, Appel, Appelbanaan, Aprium, Arazá, Atemoya, Avocado, Awarra, Azarole, Babaco (Chamburo), Banaan, Bauno (Binjai), Bergamot, Bergzuurzak, Bergpapaja, Blimbing, Biribá, Blauwe bes, Blauwe bosbes, Bloedsinaasappel, Bosbes, Braam, Broodvrucht, Cactusvijg (woestijnvijg), Cainito, Calamondin, Canistel, Carambola (Stervrucht), Cashew-appel, Cassabanana, Cherimoya, China-peer, Chinese kumquat, Citroen, Citrusvrucht, Clementine, Coronilla, Costa Rica-guave, Cranberry (grote veenbes), Curuba (bananenpassievrucht, tacso), Custardappel (Ossenhart), Dadel, Djamboe aer, Djamboe aer mawar, Djamboe bol, Djamboe semarang, Doerian, Druif, Euro-aziatische peer(Kruising van P. communis en P. pyrifolia), elderberry, Framboos, Feijoa, Gandaria, Gatenplantvrucht, Gele mombinpruim, Genipapo, Goudbes (ananaskers, Kaapse kruisbes), Granaatappel, Grapefruit, Grosella, Guave (djamboe kloetoek), Honingmeloen, Ikakopruim, Jaboticaba, Jackfruit (nangka), Jakhalsbes, Jambolan, Japanse wijnbes, Jujube, Kaki, Kapoelasan, Kei-appel, Kepel, Kers, Ketembilla, Kiwano, Kiwi, Knippa, Korlan, Kruisbes, Kumquat, Kweepeer, Kwini, Langsat, Lijsterbes, Limoen (Lime, Lemmetje), Longan, Loquat, Lotusvrucht, Lulo, Lychee (Litchi), Mabolo, Mamey sapota, Mandarijn, Mangistan, Mango, Marang, Meloen, Mexicaanse aardkers, Mini-kiwi, Mispel, Moendoe, Moerbei,Morel, Morichepalm, Nance, Nectarine, Nashi-peer, Natal-pruim, Noni, Olifantsappel, Orinoco-appel, Olijf, Papaja, Pawpaw, Papeda, Passievrucht (Maracuja, Granadilla), Peer, Pepino (Meloenpeer), Pereskie, Perzik, Perzikpalm, Pitaya, Pitomba I, Pitomba II, Plumcot, Pluot, Pomelo, Pompelmoes, Prachtframboos, Prachtige mango, Pruim, Pompoen, Ramboetan, Rijsbes, Rode bes, Rode bosbes, Rode moerbei, Rode mombinpruim, Rozenbottel, Rozijn, Salak, Santol, Sapodilla, Satsuma, Schroefpalm, Sharonfruit, Sinaasappel, Slijmappel, Soncoya, Stinkende mango, Stranddruif, Surinaamse kers, Sweetie, Tamarillo (boomtomaat), Tjampedak, Ugli, Vijg, Vlierbes, Wampi, Witte bes, Witte moerbei, Witte zapote, Watermeloen, ximenia americana, yanagi-ichigo, Zoete passievrucht, Zoetzak (Suikerappel), Zuurzak (Guanábana), Zwarte bes (Cassis), Zwarte moerbei, Zwarte zapote";
// Je zou dit kunnen vervangen door bijvoorbeeld een JSON achtig iets wat je van de server krijgt.
var searchItemsHash = searchItems.split(", ");
window.onload = function() {
var searchFunction = function() {
searchText = $('search').value;
result = '';
for (var i=0; i < searchItemsHash.length; i++) {
if (searchText == '' || searchItemsHash[i].toLowerCase().replace(searchText.toLowerCase(), '') != searchItemsHash[i].toLowerCase()) {
result += '<li>'+searchItemsHash[i].replace(new RegExp(searchText.toLowerCase(), 'gi'), function(a) { return('<b>'+a+'</b>') })+'</li>';
// De code hieronder zou je kunnen gebruiken voor als je linkjes hebt.
//result += '<li><a href="/iets/'+searchItemsHash[i][1]+'">'+searchItemsHash[i][1].replace(new RegExp(searchText.toLowerCase(), 'gi'), function(a) { return('<b>'+a+'</b>') })+'</a></li>';
};
};
if (result == '') { result = '<li><strong>Niks gevonden!</strong></li>'; };
$('results').innerHTML = result;
}
$('search').onkeyup = searchFunction;
searchFunction();
}
</script>
</head>
<body>
<div id="Holder">
<div class="header">
<h1>Search</h1>
<input type="text" name="search" value="" id="search" />
</div>
<div class="content">
<ul id="results"></ul>
</div>
</div>
</body>
</html>
|
Offline
