JavaScript gedeelte
We gaan eerst het JavaScript/AJAX gedeelte programmeren. Dit is alles wat de gebruiker kan zien. Eerst kijken we of de string langer is dan 0 karakters. Als dat zo is gaan we een aanvraag doen op het PHP-script. Het PHP-script maken we op de volgende pagina.
Zet deze code in de <head></head> tags van je pagina.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script type="text/javascript">
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code voor IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code voor IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
Dit is het grafische gedeelte van de pagina. Ik denk dat je hiervoor niet zoveel uitleg nodig hebt, want ik denk dat je al aardig wat van HTML kan.
Deze code zet je in de <body></body> tags van je pagina.
Code (php)
1
2
3
4
5
2
3
4
5
<p><b>Begin met het typen van de naam:</b></p>
<form>
Voornaam: <input type="text" onkeyup="showHint(this.value)" size="20" />
</form>
<p>Suggesties: <span id="txtHint"></span></p>
<form>
Voornaam: <input type="text" onkeyup="showHint(this.value)" size="20" />
</form>
<p>Suggesties: <span id="txtHint"></span></p>
Ga snel door naar de volgende pagina voor het PHP-script.
« vorige pagina | volgende pagina »