Twitter status:

    Suggerimenti con jQuery e un pizzico di PHP

    Posted novembre 1st, 2008 by slacko

    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.

    Filed under:Javascript, Php

    Ma avrà mica a che fare con?
  • I migliori 50 tool on-line
  • Su Facebook, il diritto d’autore, la libertà d’espressione ed altre ameneità

    • This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

    3 Responses to “Suggerimenti con jQuery e un pizzico di PHP”

    Leave a Reply