Utilizzare JQuery UI Autocomplete con PHP e Mysql

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>
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});});
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
$("#tags").autocomplete({source: "tagSearch.php"});
Di seguito un esempio per tagSearch.php:
//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);
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.
Tag: html, javascript, jquery
Integrare le API di Youtube con PrettyPhoto

L’integrazione del video nei siti web è ormai diventata una pratica comune, l’inserimento in una pagina web è molto semplice soprattutto se supportato da un servizio che ospita e gestisce i contenuti video come Youtube.
Nell’articolo di oggi mostrerò una semplice integrazione tra le Youtube API e il plugin per JQuery Prettyphoto per ottenere una galleria di video in stile Youtube da inserire nella pagina del proprio sito.
Le Youtube API non sono altro che librerie messe a disposizione degli sviluppatori per gestire con semplicità i contenuti di Youtube su un sito esterno. E’ possibile integrarle con diversi linguaggi e tecnologie, nell’esempio di oggi vedremo com’è possibile utilizzarle con javascript. Per ulteriori informazioni è possibile consultare la relativa documentazione.
PrettyPhoto è un plugin per jquery simile in tutto e per tutto a Lightbox (per prototype e scriptaculus) ulteriori informazioni sono disponibili sul sito ufficiale di PrettyPhoto.
Tag: css, html, javascript, jquery, web design, youtube
Come utilizzare qualunque font nelle pagine web con Cufon
Uno dei più grandi limiti del web per i designer è la ristretta scelta data dai font utilizzabili sul web. Normalmente è possibile definire una o più famiglie di font tramite la proprietà font-family nei css, esprimendo tramite l’ordine quale famiglia utilizzare nel caso l’utente non abbia installato un determinato font.
Il grande problema è rappresentato dal fatto che non tutti i sistemi operativi hanno gli stessi font installati e solo poche famiglie di caratteri risultano comuni a tutti gli utenti.
Per far fronte a questo problema ed avere la possibilità di utilizzare un qualunque font su una pagina web è possibile utilizzare una tecnici di font replacement (nota anche come sIFR).
Esistono numerose tecniche per raggiungere il proprio obiettivo, una delle più recenti e funzionali è Cufon.
Cufon permette la sotituzione del normale web font con un altro, tramite uno script Javascript che utilizzando VML e Canvas permette una rapida sostituzione del testo con il carattere desiderato senza modificare il codice html. Leggi l’articolo completo
Tag: html, javascript, web design
