3 Sul Blog

Auto suggerimento per form HTML in AJAX

Facebook
Twitter
LinkedIn
Pinterest
Pocket
WhatsApp

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]

Facebook
Twitter
LinkedIn
Pinterest
Pocket
WhatsApp

Never miss any important news. Subscribe to our newsletter.

Notizie Correlate

Una risposta

  1. 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 🙂

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

diciotto − 1 =