Avendo bisogno di un bell’effetto per un form ho messo mano a jQuery per creare l’esempio di suggerimento in stile Google Suggest che è spiegato di seguito.
Iniziamo con lo scheletro della pagina HTML. Molto semplice, due div e una textbox.
1 2 3 4 5 6 7 8 9 | <div> <form> <div> Scrivi le prime lettere del paese: <input id="inputString" onkeyup="lookup(this.value);" size="30" type="text" /></div> <div id="suggestions" class="suggestionsBox" style="display: none;"> <img style="position: relative; top: -12px; left: 30px;" src="upArrow.png" alt="upArrow" /></div> </form></div> |
Vediamo ora la parte javascript.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <script type="text/javascript" src="jquery-1.2.1.pack.js"></script> <script type="text/javascript"> function lookup(inputString) { if(inputString.length == 0) { // se non è stato inserito nessun carattere nascondiamo il div che contiene i suggerimenti $('#suggestions').hide(); } else { $.post("rpc.php", {queryString: ""+inputString+""}, function(data){ if(data.length >0) { $('#suggestions').show(); $('#autoSuggestionsList').html(data); } }); } } // lookup dei suggerimenti function fill(thisValue) { //riempi la textbox con il risultato e poi nascondi i suggerimenti $('#inputString').val(thisValue); setTimeout("$('#suggestions').hide();", 200); } </script> |
In pratica il compito della prima funzione è quello di raccogliere l’input della textbox e passarlo (in POST) allo script PHP utilizzando la chiamata $.post di jQuery.
Tale funzione prende 3 parametri: l’url a cui postare i dati, il dato da postare e una funzione di callback da eseguire di ritorno.
Infatti se la funzione di callback ritorna qualcosa solo allora è mostrata la lista dei suggerimenti
Infine una funzione fill che riempie la textbox con il suggerimento selezionato.
Lo script PHP è ampiamente commentato ed in pratica consiste in una funzione che prende in argomento la stringa presente in POST, esegue la query al database ritornando i suggerimenti disponibili.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | < ?php // mysqli('url', 'user', 'pass', 'database'); $db = new mysqli('localhost', 'root' ,'', 'prove'); if(!$db) { echo 'ERRORE: Impossibile connettersi al DB.'; } else { // controllo se c'è qualche stringa con cui effettuare la query if(isset($_POST['queryString'])) { $queryString = $db->real_escape_string($_POST['queryString']); //se la stringa è più lunga di 0... if(strlen($queryString) >0) { // usiamo LIKE con il carattere jolly % alla fine... //quind se il valore di querystring è "it" // allora verranno cercati i valori che iniziano con "it" e sono seguiti da altri n caratteri $query = $db->query("SELECT value FROM countries WHERE value LIKE '$queryString%' LIMIT 10"); if($query) { // finquando ho dei risultati li piazzo in un oggetto while ($result = $query ->fetch_object()) { // formattiamo i risultati mettendoli in una lista // quindi riempiamo la textbox con la funzione Fill echo '<li onClick="fill(\''.$result->value.'\');">'.$result->value.'</li>'; } } else { echo 'ERRORE: C\'è stato un problema con la query.'; } } else { } } else { echo 'Attenzione, non permettere l\'accesso diretto a questo script'; } } ?> |
Alla fine ho condito il tutto con un po’ di CSS3 (giusto per vedere l’effetto che fa…)
L’esempio funzionante lo trovate qui
Per qualsiasi problema commentate pure.
Lo script da errori di connessione al DB
@Napolux: si, avevo dimenticato di sostituire i parametri che uso in locale con quelli del db remoto. *me sbadato*
Ora funge (per provare ho inserito solo 3 nazioni: francia, italia e germania)
Mi sa che hai messo mano
a questo: http://nodstrum.com/2007/09/19/autocompleter/
COME FACCIO AD AVERE DISPONIBILE IL VALORE SELEZIONATO DAL MENU A TENDINA IN PHP?