Povia e il concerto annullato: ‘etichettato come cantante di destra’
Musica: il cantante Povia polemico con l’estremizzazione: ‘il mio concerto è stato annullato, perchè etichettato come cantante di destra’ Il ...
Musica: il cantante Povia polemico con l’estremizzazione: ‘il mio concerto è stato annullato, perchè etichettato come cantante di destra’ Il ...
Un sondaggio ha evidenziato ancora una volta, quello che purtroppo già da qualche anno era venuto alla luce: La Gen ...
Un ritrovamento ha scosso il mondo dell’archeologia: scoperto il segreto della ‘Mummia urlante’ Nel 1935, una spedizione archeologica a Deir ...
Il caffè può essere un alleato quotidiano per il benessere fisico dell’intestino, selezionando i batteri buoni del microbiota, ma come? ...
Carceri, il trend è allucinante. dal 2014 a oggi sono stati oltre 600 i suicidi e si rischia un triste ...
Dalla paralisi all’infarto, cosa rischi se ti colpisce un fulmine In Italia, la stagione estiva porta con sé non solo ...
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]
© 2024 G Tech Group S.R.L.S. – Via di Gagia 22, 38086 Giustino (TN) – P.IVA 02743570224 – REA TN – 246638 – SDI SZLUBAI -PEC gtechgroupsrls@postacert.eu
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 🙂