RICERCA AJAX SU FORM HTML
Primo passo: realizziamo la form HTML
<html>
<head><title>Suggerimento Automatico</title></head>
<body>
<form action="#" ><input type="text" id="inputtext" />
<input type="submit" name="submit" value="Search" />
<div id="suggestions"> </div>
</form>
</body>
</html>
Secondo passo: Inseriamo la funzione di suggerimento:
Il codice HTML che abbiamo appena scritto, potrebbe servire per una semplice statica ed abbastanza inutile form, ma con l’aggiunta di pochissime e semplici righe di codice Javascript, magicamente inizia a prendere vita la nostra applicazione.
Per quello che vogliamo realizzare infatti è necessario che appena digitato un carattere, quest’ultimo deve essere controllato via HTTP dal server e verificare se nella “lista dei suggerimenti” è presente una stringa corrispondente, per cui procediamo con le seguenti modifiche:
<form action="#" > <input type="text" id="inputtext" onkeyup="suggest(this.value)" /> <input type="submit" name="submit" value="Search" /> <div id="suggestions"> </div> </form>
In questa maniera ogni volta che un carattere viene inserito la funzione Javascript suggest viene chiamata e passa il valore della form di testo come parametro, vediamo ora la creazione di questa funzione.
var xmlHttp;
function suggest(input) {
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null) {
alert ("Browser does not support HTTP Request");
return;
}
var url="suggest.php";
url=url+"?query="+input;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged() {
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById("suggestions").innerHTML=xmlHttp.responseText ;
}
}
function GetXmlHttpObject() {
var xmlHttp=null;
try{
xmlHttp=new XMLHttpRequest();
}catch (e){
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
Questa funzione ci permette di lavorare attraverso tutti i browser sfruttando il protocollo HTTP creando un oggetto XMLHttpRequest, ogni volta che lo status cambia vengono ricreati gli oggetti XMLHttpRequest e memorizzati nella variabile XMLHTTP e successivamente viene creato l’URL per il controllo della stringa di suggerimento nel server.
Terzo passo: php lato Server:
Per concludere abbiamo bisogno dal lato server di verificare le corrispondenze tra le lettere digitate nelle form, con le stringhe presenti in un file di testo o meglio un database. Per il nostro esempio ci serviremo di un semplice array riempito con dei paesi esteri:
<?php
$countries[] = "Afghanistan";
$countries[] = "Albania";
$countries[] = "Algeria";
$countries[] = "Azerbaijan";
$countries[] = "Bahrain";
$countries[] = "Barbados ";
$countries[] = "Belgium";
$countries[] = "Canada ";
$countries[] = "Chile";
$countries[] = "China";
$countries[] = "Egypt";
$countries[] = "Germany";
$countries[] = "India";
$countries[] = "Iraq";
$countries[] = "Ireland";
$countries[] = "Mexico";
$countries[] = "Pakistan";
$countries[] = "Poland";
$countries[] = "Sri Lanka";
$countries[] = "Sudan";
$countries[] = "Thailand";
$countries[] = "United Kingdom";
$countries[] = "United States of America";
$countries[] = "Zimbabwe";
$query=$_GET["query"];
if (strlen($query) > 0) {
$suggestions="";
for($i=0; $i<count($countries); $i++) {
if (strtolower($query)==strtolower(substr($countries[$i],0,strlen($query)))) {
if ($suggestions=="")
$suggestions=$countries[$i];
} else {
$suggestions=$suggestions.", ".$countries[$i];
}
}
}
}
echo $suggestions;
?>
E questo è tutto. Il codice e le parti che abbiamo implementato, sono funzionali e serviranno per ottenere il vostro script ad Auto Suggerimento oppure Auto Compilazione dei vostri form con tecnologia Web 2.0
