Στο παρακάτω παράδειγμα κάθε φορά που πληκτρολογούμε έναν χαρακτήρα, εμφανίζονται τα ονόματα των πόλεων που αντιστοιχούν σε αυτούς τους χαρακτήρες.
Παρακαλώ αρχίστε να πληκτρολογείτε στα λατινιά το όνομα της πόλης που θέλετε να ταξιδέψετε
Διαθέσιμοι προορισμοί:
Όπως θα διαπιστώσετε στον κώδικα της σελίδας, το get_towns.php καλείτε κάθε φορά που ο χρήστης πληκτρολογεί έναν χαρακτήρα στο πεδίο κειμένου (onkeyup="showHint(this.value)") περνώντας σαν παράμετρο στο php αρχείο τους χαρακτήρες που έχει πληκτρολογήσει ο χρήστης μέχρι εκείνη την στιγμή.
Και για να αναφέρουμε πάλι το τρομερό και φοβερό πλεονέκτημα που προσφέρει η τεχνική AJAX, τονίζουμε ότι αν ο διαχειριστής της σελίδας προσθέσει το όνομα μιας νέας πόλης στον πίνακα $a[...], τότε αυτή η πόλη (αυτή η νέα καταχώρηση) την ίδια στιγμή γίνεται άμεσα διαθέσιμη στον επισκέπτη και θα την εμφανίσει στον browser του χωρίς να χρειαστεί να ανανεώσει την σελίδα!
Ο κώδικας της σελίδας
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1253" />
<title>Untitled Document</title>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url,cfunc) {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera
xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function showHint(str) {
loadXMLDoc("get_towns.php?q="+str,function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
});
}
</script>
<head>
<body>
<h3>Παρακαλώ αρχίστε να πληκτρολογείτε στα λατινιά το όνομα της πόλης που θέλετε να ταξιδέψετε</h3>
<form action="">Πόλη:
<input id="txt1" onkeyup="showHint(this.value)" type="text" />
</form>
<p><strong>Διαθέσιμοι προορισμοί:</strong>
<span id="txtHint"> </span>
</p>
</body></html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1253" />
<title>Untitled Document</title>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url,cfunc) {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera
xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function showHint(str) {
loadXMLDoc("get_towns.php?q="+str,function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
});
}
</script>
<head>
<body>
<h3>Παρακαλώ αρχίστε να πληκτρολογείτε στα λατινιά το όνομα της πόλης που θέλετε να ταξιδέψετε</h3>
<form action="">Πόλη:
<input id="txt1" onkeyup="showHint(this.value)" type="text" />
</form>
<p><strong>Διαθέσιμοι προορισμοί:</strong>
<span id="txtHint"> </span>
</p>
</body></html>
Δείτε τον κώδικα του get_towns.php
<?php
// Fill up array with names
$a[]="Athens";
$a[]="Thessaloniki";
$a[]="Piraeus";
...
$a[]="Hios";
$a[]="Volos";
//q parameter
$q=$_GET["q"];
if (strlen($q) > 0) {
$hint=""
for($i=0; $i
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) {
if ($hint=="") {
$hint=$a[$i];
}
else {
$hint=$hint." , ".$a[$i];
}
}
}
}
if ($hint == "") {
$response="no results"
}
else {
$response=$hint;
}
echo $response;
?>
// Fill up array with names
$a[]="Athens";
$a[]="Thessaloniki";
$a[]="Piraeus";
...
$a[]="Hios";
$a[]="Volos";
//q parameter
$q=$_GET["q"];
if (strlen($q) > 0) {
$hint=""
for($i=0; $i
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) {
if ($hint=="") {
$hint=$a[$i];
}
else {
$hint=$hint." , ".$a[$i];
}
}
}
}
if ($hint == "") {
$response="no results"
}
else {
$response=$hint;
}
echo $response;
?>