Auto suggerimento per form HTML in AJAX

Autore: pive
Filed under: Ajax, Programmazione

Saturday
Aug 23,2008

Vi siete mai imbattuti in quei form, che vi suggeriscono i valori da inserire? Proprio come quello in Wordpress per esempio, quando inserite i tags in un vostro post. Di seguito vi spiegherò il codice per poter ricreare tale effetto, nelle vostre applicazioni web.

Auto Suggerimento per Form HTML in AJAX

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: doniamo vita alla form con 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

via [webdevlounge]

Ti piace questo post? Allora Condividilo!!!

Hai trovato interessante questo post? Iscriviti al nostro Feed RSS per non perderti nemmeno un aggiornamento. Grazie per la visita... a presto!

1 Reazione per "Auto suggerimento per form HTML in AJAX"

n. 1 - nickel22 (10 comments) October 8th, 2008 at 14:21
Interessante grazie, solo un dubbio.. forse sarebbe opportuno implmentare un listener ritardato.. altrimenti se scrive una parola a ogni lettera scatena una richeista e query sul server.. la cosa non è semplice ma sicuramente se si fa uan query con tempo minimo 1-2sec forse si hanno anche un numero molto minore di transazione, soprattutto nel caso di utenti / accessi contemporanei multipli..

ciao e grazie del codice