Un campo con autocompletamento con Script.aculo.us

di: Alvin Laini     25 Giugno 2007

Analizziamo ora il codice sorgente lato server, quello della pagina php dati_autocompletamento.php che serve ad estrapolare i dati dal nostro database e a creare una lista non numerata (<ul>) che è il formato necessario alla funzione JavaScript per i suggerimenti in index.php.

<?
// Esegue la connseeione al Database Mysql
include("../../connect_db.php");

// Inserisce i nomi delle tabelle da utilizzare nel corso dello script 
// La tabella località conterrà il nome del comune

$tab_localita="localita";

// controlla che il campo di input che genera la query non sia nullo 
// e che non contenga caratteri che possano intaccare la mia query
if(isset($testo_auto) && !eregi("%",$testo_auto))
{
  $sql_dati=mysql_query("SELECT comune FROM $tab_localita WHERE comune LIKE '%".addslashes($testo_auto)."%'") or die(mysql_error());
?>
  
<? if($trovato_sql_dati = mysql_num_rows($sql_dati) > 0) { ?>

  <ul class='lista_ul'> 
  <? while($result_dati=mysql_fetch_assoc($sql_dati)) { ?>
    <li><?=$result_dati[comune]?></li>
  <? } ?>
  </ul>
<? } else { ?>
  <ul class='no_li'>
  <li>Dati non presenti</li>
  </ul>
<? } ?>

<? }  ?> 

Per prima cosa si esegue una connessione al database MySql dove sono memorizzati i dati. Poi esaminiamo il corretto flusso dati ricevuto dall'utente, verificando il contenuto della variabile, in modo tale da non trarre in errore la query MySql.

Sarà ricercato il nome del comune caricato nella tabella localita utilizzando il costrutto LIKE di SQL che si avvale dell'utilizzo di un carattere speciale percentuale (%) come prefisso e postfisso alla variabile di ricerca. In questo modo selezioniamo tutti i nomi di comunq che contengono la stringa digitata dall'utente.

Tutto qui. È disponibile per il download un file zip con tutte le pagine dell'esempio.

Guide JavaScript

Guida Node.js

Il framework che permette di per usare V8, l'interprete JavaScript...

Canvas, guida ai framework

Canvas, tra gli elementi di HTML5 è forse quello di maggior impatto....

Guida jQuery UI

Creare siti ricchi e dinamici con jQuery UI, il progetto ufficiale...

Altre guide

Newsletter @JavaScript

Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.

Iscriviti alla newsletter

Altre newsletter

Corsi in aula

Corso Webmaster base

18 Giugno 2012 a Milano
Disponibilità: 6 Posti

Corso Google AdWords Base

25 Giugno 2012 a Milano
Disponibilità: 7 Posti

Corso JQuery e Ajax per Webmaster

03 Luglio 2012 a Milano
Disponibilità: 7 Posti

Corso Google AdWords Base

05 Giugno 2012 a Roma
Disponibilità: 7 Posti

Corso Webmaster base

11 Giugno 2012 a Roma
Disponibilità: 7 Posti