Howtoweb.it

Utilizzare JQuery UI Autocomplete con PHP e Mysql

Mauro Accornero — Fri, 25 Jun 2010 08:56:36 +0000

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.

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

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.

Realizzare select multilingue con Jquery

Mauro Accornero — Mon, 14 Jun 2010 05:00:25 +0000

In questo articolo vedremo come realizzare un selettore multilingue con html, css e jquery, per vedere l’ esempio completo visitate la demo.

Per questo tutorial ho utilizzato world-flags-sprite, una soluzione css che offre una vasta gamma di bandiere di numerosi stati attraverso la tecnica degli sprites css, consiglio vivamente questa soluzione che permette di aggiungere facilmente le immagini per nuove lingue.
Iniziamo creando un nuovo file html in cui inseriremo il nostro markup. L’esempio qui proposto è pensato in chiave statica ma può essere facilmente applicato anche a pagine dinamiche gestendo l’output del testo e delle classi.

HTML




Italy




Usa




England




France




Spain




Germany

Definiamo una lista non ordinata con all’interno degli elementi “li” che conterranno le singole lingue. In ogni singola voce definiamo un link che conterrà l’url al sito nella rispettiva lingua.In questo esempio ogni link rimanda ad una pagina fittizia a cui viene aggiunta una variabile per la selezione della lingua. Nel link inseriremo un elemento span che utilizzaremo come contenitore per l’immagine della bandiera e il testo della lingua.

Le classi presenti sull’elemento “ul” sono relative al layout della lista (.langSelect) e al template applicato (“.black”,”.white” oppure “.grey”). Le classi “.f16″ e “flag” sono relative a flags16.css e servono per mostrare l’immagine delle rispettive bandiere.

CSS

La prima parte del css è dedicata al template. Colori, bordi e immagini di fondo sono gestiti dalle classi “.black” , “.white” e “.grey”.

/*black theme*/
.black{background-color:#000;border:1px solid #444;}
.black li:first-child{background-position:right top;}
.black a{color:#fff;}
.black a:hover{background:#111;}
.black li:first-child + li{border-top:1px solid #444;}
/*white theme*/
.white{background-color:#eee;border:1px solid #bbb;}
.white li:first-child{background-position:right -25px;}
.white a{color:#333;}
.white a:hover{background:#ddd;}
.white li:first-child + li{border-top:1px solid #bbb;}
/*grey theme*/
.grey{background-color:#ccc;border:1px solid #eee;}
.grey li:first-child{background-position:right -50px;}
.grey a{color:#000;}
.grey a:hover{background:#999;}
.grey li:first-child + li{border-top:1px solid #aaa;}

La seconda parte del css gestisce il layout della lista definendo dimensioni, spaziature e larghezza.

.langSelect{
    width:150px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    text-align:left;
    list-style:none;
}
.langSelect li{
    line-height:25px;
    position:relative;
}
.langSelect a{
    padding-left:35px;
    position:relative;
    text-decoration:none;
    display:block;
}
.langSelect li:first-child a:hover{
    background:transparent;
}
.langSelect li:first-child{
    background-image:url(../img/bg_lang_select.png);
    background-repeat:no-repeat;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}
.langSelect li:last-child a:hover{
    -moz-border-radius:0 0 10px 10px;
    -webkit-border-radius:0 0 10px 10px;
    border-radius:0 0 10px 10px;
}
.langSelect a span{
    width:16px;
    height:16px;
    position:absolute;
    top:50%;
    margin-top:-8px;
    left:10px;
}

In questo modo è possibile creare stili customizzati in poco tempo e senza dover metter mano al layout.

JQUERY E JAVASCRIPT

Prima di inizare con il codice javascript assicuratevi di aver incluso la libreria jquery nella pagina, la potete trovare sul sito di jquery o in alternativa caricarla attraverso le Google AJAX Libraries API.
Lo script può essere incluso sia internamente che esternamente alla pagina html.

Il codice verifica innanzitutto il caricamento della pagina.

 $(function() {

Una volta certo della presenza degli elementi nel DOM inizia nascondendo tutti gli elementi “li” successivi al primo.

$(“.langSelect li:first-child”).nextAll().hide();

La seguente istruzione verifica l’hover del mouse sulla lista.

 $(".langSelect").hover(function(){

Al mouseover anima gli elementi successivi al primo “li” mostrandoli.

 $(this).find("li:first-child").nextAll().not(":animated").slideDown(500);

Mentre al mouseout li nasconde

 $(this).find("li:first-child").nextAll().not(":animated").slideUp(500);

Una piccola nota su questo passaggio, è possibile notare l’utilizzo di .not(“:animated”) questa aggiunta impedisce che le animazioni partano o si ripetano quando gli elementi sono ancora animati.
Una volta completate le istruzioni sull’animazione definiamo il codice da eseguire al click della singola voce.

 $(".langSelect li").click(function(){

Come prima cosa è necessario verificare se la voce cliccata sia quella già selezionata.

 if($("li").index(this) == 0){

in quel caso annulliamo la chiamata del link e non eseguiamo ulteriori istruzioni

 return false;

In questo caso return false sull’elemento li annulla la chiamata del link al suo interno impedendo la chiamata alla pagina su cui l’utente già si trova.
Nel caso l’utente clicchi su una lingua diversa da quella selezionata spostiamo questa voce come prima della lista.

 $(this).prependTo($(this).parent("ul"));

Subito dopo animo il menu per nascondere le altre lingue.

 $(this).parent("ul").find("li:first-child").nextAll().slideUp(400,

E aggiungo una funzione di callback che al completamento dell’animazione rimanda l’utente all’url presente nel link della lingua cliccata.

 function (){
 location.href = $(this).find("a").attr("href");
 });

Per concludere annullo la chiamata del link tradizionale ed evitare l’immediata chiamata alla pagina in questione.

 return false;

Per vedere l’ esempio completo visitate la demo.

Lezioni di HTML 5 Lezione 4 – L’elemento video

Mauro Accornero — Wed, 19 May 2010 22:19:30 +0000

Una delle funzionalità più interessanti dell’HTML 5 è senza dubbio rappresentata dalla possibilità di inserire filmati video all’interno della pagina web.

Questo elemento cambia notevolmente il modo in cui gli utenti possono usufruire dei video su internet permettendo la visione del contenuto senza un player flash.

L’attuale supporto per questo elemento è riservato alle ultime versioni di firefox, safari e chrome ma la stessa microsoft ha annunciato il supporto per Internet explorer 9 mentre per Opera dalla versione 10 (10.5).

Per iniziare

Prima di iniziare con il codice è indispensabile ricordare che non tutti i browser supportano gli stessi contenitori e gli stessi codecs audio/video. Un file video è di fatti composto da un contenitore (mpeg4,flash video, ogg ecc), un codec audio (mpeg1,vorbis, ecc) e un codec video (mpeg4 asp, h.264, theora).
Per portare un po’ di ordine in questa situazione è utile tener presente ciò che è supportato dai browser e preparare due files. Uno con theora,vorbis e ogg e il secondo con h.624,aac e mp4.

Il primo files sarà supportato da firefox, opera e chrome il secondo da chrome, safari, iphone e android.

Per la conversione dei files di questo esempio sono stati utilizzati ffmpeg2theora ed handbrake .

L’elemento video

Per integrare nella pagina web il nostro video utilizziamo l’elemento video con chiusura esplicita.

Al suo interno è possibile specificare un contenuto alternativo nel caso il browser non supporti questo elemento.