Home
Home
Tutorials
   PHP
   Java
   Tutti...
Manuali
SmartImage
Marketing
Downloads
Contatti
Affiliati

  Da vedere
Hosting
Statistiche per siti
Corsi per webmaster
Hardware
Processori


  OnFocus
JDOM, file XML e Java: Introduzione e lettura file

Meno codice più risultati con INSERT ... ON KEY DUPLICATE UPDATE

Ricerca in un vettore con divide et impera

  Siti Amici
Miki News
Giochi gratis
Areagratis
Baratto Online
AI Machines
Guide e Manuali Gratis
Egregio Directory
E-cerca.com
Shopping online
Carte di credito
Bigthink - idee dal web
Appunti universitari
Add to Technorati Favorites

Tutti i siti amici
Diventa Affiliato

 


Autore: Stefano Aurilio
Categoria: php
Livello: base Livello base

Ajax Autocompleter nei nostri form

Autocompletamento alla portata di tutti

In questo articolo spiegherò come utilizzare una delle applicazioni piu’ diffuse del web 2.0, ossia l’ autocompletamento. Il punto di forza dell’ autocompletamento sta nel fatto di poter aiutare l’ utente durante la digitazione delle parole, mostrando dei suggerimenti pertinenti.
L’ esempio che viene proposto di seguito fa uso della ormai nota libreria javascritp Scriptacolous (http://script.aculo.us/) che ha realizzato anche un set di api per l’ autocompletamento.
L’ autocompletamento di Scriptacolous si implementa su un campo di testo all’ interno di un form: non si tratta quindi di una classica tendina che si ottiene con il tag <SELECT>. La tendina infatti è un DIV (inizialmente nascosto) che viene riempito dal risultato di una richiesta asincrona e mostrato a video, sfruttando le potenzialità del linguaggio Javascript.
Il contenuto della tendina è l’ elenco dei suggerimenti che sono organizzati all’ interno di una lista non ordinata (UL), dove ogni elemento (LI) è una parola pertinente a quella che si sta cercando.

L’ esempio che segue è costituito da un file html contenente il form di input, e il file php che si occupa di cercare i suggerimenti all’ interno di un database.
Innanzitutto è necessario scaricare l’ ultima versione della libreria Scriptacolous dal sito http://script.aculo.us/downloads e includere all’ interno della pagina html in cui vogliamo attivare l’ autocompletamento, i seguenti file js: prototipe.js, effects.js, controls.js.
Il form di input è il seguente:

<form name="autocompleteTest" action="">
<
input type="text" value="" name="findme" id="findme">
<
div id="suggestBoxList" class="suggestBox"></div>
<
script type="text/javascript">
new 
Ajax.Autocompleter("findme""suggestBoxList""requestScript.php", {minChars1});
</script>
</form>


Come possiamo vedere, il core dell’ autocompletamento è l’ oggetto Ajax.Autocompleter. I parametri che riceve in ingresso sono:
• Id dell’ INPUT in cui l’ utente digita le parole da cercare
• Id del DIV che avrà il compito di contenere l’ elenco dei suggerimenti
• il percorso dello SCRIPT che viene invocato nella richiesta asincrona per generare l’ elenco dei suggerimenti
• l’ ultimo argomento permette di impostare alcuni parametri opzionali

Il parametro opzionale che abbiamo considerato è minChars, che indica in numero minimo di caratteri da digitare per poter effettuare la ricerca. La lista delle opzioni sulle quali è possibile agire è consultabile a questo indirizzo: (http://wiki.script.aculo.us/scriptaculous/show/Ajax.Autocompleter).

Il file requestScript.php riceve in POST la parola che l’ utente sta digitando nel form di input, e si occupa di generare la lista dei suggerimenti. Il codice è il seguente:

$findme $_POST['findme'];
$list '<ul>';

global 
$con//si suppone che siamo connessi al db
$sql "SELEC cognome, nome FROM persone WHERE cognome LIKE '%$findme%'";
$result mysql_query($sql$con);
if(
mysql_num_rows($result ) > 0){
   while($row mysql_fetch_row($result)){
   $list .= '<li>'.$row['cognome'].', '.$row['nome'].'</li>';
  }
}
else{
   $list .= '<li>Nessun risultato pertinente ...</li>'
}

$list .= '</ul>';

mysql_free_result($result);

echo 
$list;
unset(
$list);

Maggiori informazioni sull' autocompletamento secondo Scriptacolous sono disponibili ai seguenti indirizzi:

http://wiki.script.aculo.us/scriptaculous/show/Autocompletion
http://wiki.script.aculo.us/scriptaculous/show/Ajax.Autocompleter
PHP 5 ad oggetti: visibilità private, public, protected Precedente Indice Successivo PHP 5 ad oggetti: il modificatore "static"
PHP 5 ad oggetti: visibilità private, public, protected PHP 5 ad oggetti: il modificatore "static"