Suggerimenti con jQuery e un pizzico di PHP

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.

Questa voce è stata pubblicata in Javascript, Php. Contrassegna il permalink.

4 risposte a Suggerimenti con jQuery e un pizzico di PHP

  1. Napolux scrive:

    Lo script da errori di connessione al DB :)

  2. slacko scrive:

    @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)

  3. AEsposito scrive:

    Mi sa che hai messo mano ;-) a questo: http://nodstrum.com/2007/09/19/autocompleter/

  4. MASSIMO scrive:

    COME FACCIO AD AVERE DISPONIBILE IL VALORE SELEZIONATO DAL MENU A TENDINA IN PHP?

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">