In questo articolo vedremo come integrare facilmente il widget autocomplete di Jquery UI all’interno di pagine dinamiche.

L’utilizzo è molto semplice, come prima cosa è necessario scaricare il pacchetto completo di Jquery UI compreso di tema personalizzato o standard e collegare i rispettivi files alla pagina dinamica.

<link rel="stylesheet" href="css/theme/ui.theme.css" type="text/css"/>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script></pre>

Ora possiamo aggiungere l’elemento input che utilizzero per l’autocomplete, per comodità di selezione verrà aggiunto un id.

<input value="Insert your tag here" /> 

Per ciò che riguarda javascript iniziamo applicando un autocomplete base al campo input

$(function() {var myTags = ["tag1", "tag2", "anotherTag", "simpleTag"];
$("#tags").autocomplete({source: myTags});})</pre>

In questo caso settiamo come opzione “source” che specifica come sorgente l’array “myTags”.Per rendere dinamico l’autocomplete modifichiamo la sorgente con un file dinamico che si occuperà di effettuare la ricerca

<pre>$("#tags").autocomplete({source: "tagSearch.php"});</pre>

Di seguito un esempio per tagSearch.php:

<pre>
<pre>//creazione di un array vuoto
$return_arr = array();

//dati di accesso a mysql e al db
$dbhost = 'YOUR_SERVER';
$dbuser = 'YOUR_USERNAME';
$dbpass = 'YOUR_PASSWORD';
$dbname = 'YOUR_DATABASE_NAME';

//definisco la variabile di ricerca dell'utente
$term = $_GET["term"];

//connessione al a mysql
$conn = mysql_connect($dbhost, $dbuser, $dbpass)
or die ('Impossibile connettersi a Mysql');
//selezione ddb
mysql_select_db($dbname);
//se connesso
if ($conn)
{
//query select
$fetch = mysql_query("SELECT * FROM tags WHERE MATCH(tagName) AGAINST('".$term."*')");
//loop dei dati
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
$row_array['value'] = $row['tagName '];
array_push($return_arr,$row_array);
}

}
//chiudo la connessione a mysql
mysql_close($conn);
//restituisco l'array in formato json
echo json_encode($return_arr);</pre>
</pre>

La variabile $terms viene ricavata dall’url, l’autocomplete di Jquery UI richiama infatti il file search.php con la variabile term (es. search.php?term=ciao) ad ogni change nel campo input.Considerato che la variabile term viene aggiornata e inviata ad ogni change del campo ho utilizzato MATCH AGAINST nella query affinchè ad ogni richiesta mysql cerchi l’input dell’utente seguito da altro.Il risultato è che a fronte di una ricerca “a” verranno restituiti tutti i dati che iniziano per “a”, aggiungendo lettere verranno restituiti solo i dati che corrispondono ai criteri della ricerca.

L’autocomplete di JQuery UI prevede una vasta serie di opzioni con le quali è possibile manipolare i dati prensenti nell’input e nei risultati, creare una cache dai dati e customizzare aspetto e animazioni dell’input.Per maggiori informazioni consiglio una lettura della documentazione disponibile sulla pagina dedicata.

Related posts:

1. NETEYE Activity Indicator
2. Clonazione di elementi con SheepIt! e jQuery
3. Esiste un metodo per conoscere tutte le tabelle presenti in un database MySql?
4. tooltips flessibile con jquery bubble popup
5. Navigazione con un numero illimitato di sottomenu – Jmenu

Tagged as:  javascript, jquery   ·   Categories:  Jquery, PHP