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.
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]
Una risposta
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 🙂