Script ajax: Suggerimenti autocomplete con scriptaculous

   difficoltà:  script script script script script

Demo
Download
Script simili
20/3/2007


Con questo script vedremo come implementare un completamento automatico su un campo di testo di un form usando la libreria script.aculo.us. Inserendo parte del testo da cercare in un campo di testo verrà visualizzata una tendina con i suggerimenti pertinenti al testo digitato.

L'autocomplete di script.aculo.us funziona così: mentre digitiamo il testo viene inviata una richiesta ad un'altra pagina, inviando via POST il testo digitato. Nella pagina chiamata si eseguirà una query di ricerca nel database e verranno stampati a video i risultati in un elenco puntato. Infatti nel menu a tendina di suggerimento verranno visualizzati per ogni riga le righe dell'elenco. Chiaramente attraverso i css si potrà modificare la visualizzazione dell'elenco.

Nella pagina contenente il form, index.htm, includiamo la libreria script.aculo.us inserendo i file tutti in una cartella 'ajax'.

Ipotizziamo di voler fare una ricerca sulle squadre di serie A. Il form di input risulterà così:

<input type="text" id="squadra" name="squadra"/>
<div id="suggerimenti_squadra" class="boxsuggerimenti"></div>
<script type="text/javascript">new Ajax.Autocompleter("squadra", "suggerimenti_squadra", "cerca.php", {minChars: 1});</script>
Il div suggerimenti_squadra sarà quello che visualizza i risultati della ricerca, quindi i suggerimenti.
La chiamata ajax sotto ha come primo valore il nome del campo in cui viene digitato il testo, il secondo il div dove scrivere i suggerimenti, il terzo la pagina che conterrà l'elenco puntato coi risultati della ricerca. Tra parentesi quadra qualche opzione. Utile minChars che indica in numero minimo di caratteri digitati per effettuare la ricerca e dare quindi i suggerimenti.

Con l'uso di un foglio di stile poi daremo una visualizzazione decente al tutto.

Ecco il file index.htm completo:
<html>
<head>
<script src="ajax/prototype.js" type="text/javascript"></script>
<script src="ajax/effects.js" type="text/javascript"></script>
<script src="ajax/controls.js" type="text/javascript"></script>
<title>Script ajax: Suggerimenti autocomlete con scriptaculous</title>
<style type="text/css">
input{
font-family:Verdana;
font-size:10px;
width:200px;
}
div.campo{
font-family:Verdana;
font-size:10px;
}
div.boxsuggerimenti {
font-family:Verdana;
font-size:10px;
position:absolute;
background-color:white;
border:1px solid #888;
margin:0px;
padding:0px;
}
div.boxsuggerimenti ul {
list-style-type:none;
margin:0px;
padding:0px;
}
div.boxsuggerimenti ul li.selected { background-color: #C2EBEF;}
div.boxsuggerimenti ul li {
list-style-type:none;
display:block;
margin:0;
padding:1px;
cursor:pointer;
border-bottom:1px solid #888;
}
</style>
</head>
<body>
<div class="campo">Squadra di calcio serie A:</div>
<input type="text" id="squadra" name="squadra"/>
<div id="suggerimenti_squadra" class="boxsuggerimenti"></div>
<script type="text/javascript">new Ajax.Autocompleter("squadra", "suggerimenti_squadra", "cerca.php", {minChars: 1});</script>

</body>
</html>
E nel file cerca.php che succede?
Facciamo finta che sia un file statico. Al cui interno scriviamo solo:
<ul>
<li>milan</li>
<li>inter</li>
</ul>
in pratica ogni volta che digitiamo qualcosa nel box di suggerimento vedremo sempre i due suggerimenti milan e inter.
Quello che a noi serve e far si che in file cerca.php stampi a video in modo dinamico i risultati di una ricerca.
Quindi preleviamo il dato inviato via POST dal form $_POST['squadra'] per php o Request.Form('squadra') per asp e con la variabile squadra ricevuta facciamo una query sul database nella tabella squadre prelevando tutti i nomi delle squadre che iniziano per squadra, o che contengono il termine squadra:
select nome from squadre where nome like '%$squadra%' order by nome
oppure per trovare solo quelle che iniziano con il temine:
select nome from squadre where nome like '$squadra%' order by nome
facciamo quindi un ciclo sui risultati stampando i nomi delle squadre trovate tra i tag lista.

Esempio file php:
<?
if(isset($_POST['squadra'])){$squadra=$_POST['squadra'];}else{$squadra="";}
//........connessione a dB...
$query="select nome from squadre where nome like '%$squadra%' order by nome";
$result = mysql_query ($query, $conn) or die(mysql_error());
$ArrayRisultati=Array();
while ($risultati = mysql_fetch_array ($result)){
array_push($ArrayRisultati,$risultati) ;
}
echo "<ul>";
for($a=0;$a<count($ArrayRisultati);$a++){
echo "<li>".$ArrayRisultati[$a]['nome']."</li>";
}
echo "</ul>";
?>





Commenti


  daweb

22/3/2007 12:34:31

Bel lavoro come sempre.

Occhio, nella parte relativa al Db l'array da contare è ArrayRisultati

  Fabio

22/3/2007 12:48:45

sistemato :-) grazie.

  GoodSax

24/4/2007 15:48:32

Rapido ed indolore - ottimo lavoro, complimentoni!

  Massimo

26/4/2007 9:31:01

Ciao, ottimo script, solo che a me non evidenzia (col grassetto) i caratteri cercati. Come si fa ad ottenere questo effetto?
Grazie

  Fabio

26/4/2007 9:51:17

Ciao!
Allora per mettere in grassetto i caratteri cercati bisogna nel file php avere qualcosa del tipo:


for($a=0;$a<count($ArrayRisultati);$a++){
echo "<li>".str_replace($squadra,"<b>".$squadra."</b>",$ArrayRisultati[$a]['nome'])."</li>";
}


  Massimo

2/5/2007 17:50:21

Ahhh: il problema era che io avevo sostituito il ciclo for con un while, e quindi ho modificato il codice non riportando str_repalce... etc.
Grazie per il suggerimento!

  Enrico

9/5/2007 10:52:30

Ottimo lavoro, bravi era proprio quello che cercavo... grazie!

  Erick

29/5/2007 0:01:35

Molto interessante. Quello che non capisco e' come utilizzare la scelta fatta. Mi spiego meglio...dopo che ho trovato cio' che mi serve come posso introdurre, ad esemnpi, un bottone "vai" (quindi un link)???

  Fabio

29/5/2007 0:46:34

in linea di massima basta che al posto della parola trovata inserita nell'elenco ci metta il link..cioè se fai la ricrrca nel db avrai il campo nome e il campo url E quindi ad esempio


for($a=0;$a<count($ArrayRisultati);$a++){
echo "<li><a href='".$ArrayRisultati[$a]['url']."'>".$ArrayRisultati[$a]['nome']."</a></li>";
}



Al posto di


for($a=0;$a<count($ArrayRisultati);$a++){
echo "<li>".$ArrayRisultati[$a]['nome']."</li>";
}


  erick

29/5/2007 11:57:20

Ho afferrato l'idea...il problema e' che per il link devo sfruttare l'id relativo al risultato della query al database. Cerco di capire come passare l'id in modo "nascosto". Grazie!

P.S. Se hai altri suggerimenti...falli pure! :)

  Massimo

28/11/2007 11:14:44

Ho usato questo script, come da post precedente, e funziona alla grande.
Ora però ho un'altra necessità: dovrei avere 2 valori di ritorno, come in una combobox: un testo da visualizzare e un id nascosto.
Visto che ho notato che ci sono anche altre persone che hanno la mia stessa necessità, c'è un modo per ottenere questo risultato?
Grazie.

  Fabio

20/2/2008 15:28:43

Molto veloce e intuitivo...ora però mi piacerebbe nascondere il div con i suggerimenti con un "onmouseout" una volta che si esce con il cursore dalla zona dei suggerimenti. Ci sto impazzendo ma nn trovo la soluzione...

  Daniele

15/9/2008 19:18:56

Non riuscendo a scrivere del codice in questa pagina ho dovuto aprire un thread qui http://forum.html.it/forum/showthread.php?s=&threadid=1270855

qualcuno mi può dare una mano?

grazie e a presto, daniele

  Dreho

16/9/2008 9:21:54

Ho la necessità di aggiungere un altro LIKE nel file cerca.php e sto seguendo questa logica che non mi ha portato da nessuna parte

step 1) in completamento.htm inserisco un input hidden per la categoria FASCIA


<input type="text" id="nome_prodotto" name="nome_prodotto"/>

<input type="text" id="fascia" name="fascia" value="<?php echo $_POST['fascia']; ?>"/>

<div id="suggerimenti_squadra" class="boxsuggerimenti"></div>

<script type="text/javascript">new Ajax.Autocompleter("nome_prodotto", "suggerimenti_squadra", "pages/cerca.php", {minChars: 1});</script>



step 2) in cerca.php applico queste varianti

<?php
if(isset($_POST['nome_prodotto'])){$nome_prodotto=$_POST['nome_prodotto'];$nome_fascia=$_POST['fascia'];}else{$nome_prodotto="";}
$arraysquadre=array();

include "connessione.php";

$query="SELECT NOME FROM prodotti WHERE NOME LIKE '%$nome_prodotto%' AND FASCIA_PREZZO LIKE '$nome_fascia' order by NOME";

.......


mi dai una mano?
praticamente voglio visualizzare solo i codici appartenenti ad una fascia di prezzo che indico in precedenza

  Fabio

16/9/2008 9:25:42

@Dreho:
prova a modificare cosi:


<script type="text/javascript">new Ajax.Autocompleter("nome_prodotto", "suggerimenti_squadra", "pages/cerca.php?fascia="+document.getElementById('fascia'), {minChars: 1});</script>


e nel secondo file prendi fascia via GET

  Daniele

16/9/2008 10:00:55

Grazie Fabio,
ho modificato come tua indicazione ma la variabile in POST "fascia" non viene recepita dal file cerca.php

allora ho fatto questa prova che sembra aver sortito successo

nel file completamento.php
<script type="text/javascript">new Ajax.Autocompleter("nome_prodotto", "suggerimenti_squadra", "pages/cerca.php?fascia=<?php echo $_POST['fascia']; ?>", {minChars: 1});</script>

mentre in cerca.php

ho cambiato il POST di $nome_ fascia in GET
if(isset($_POST['nome_prodotto'])){$nome_prodotto=$_POST['nome_prodotto'];$nome_fascia=$_GET['fascia'];}else{$nome_prodotto="";}
$arraysquadre=array();


  Michele

7/10/2008 11:26:31

Ottimo lavoro, si potrebbe avere un esempio in asp 3.0?

  Andrea

17/12/2008 13:29:48

Ciao a tutti, utilizzo questi comodissimi script e faccio un confronto con i dati presenti su un database.

Ho una form per inserimento dati.
Un un'input text in cui devo inserire il nome, trami l'autocomplete verifico se già il nome è inserito nel database e se c'è lo scelgo.

Ora, come faccio a passare l'id del nome scelto attraverso la form?
Come recupero il valore "id" del database?
Grazie per l'aiuto !!
Andrea

  GioMBG

27/1/2009 14:27:19

Ciao Raga!
funziona tutto, solo che non mi si presentano solo i relativi suggerimenti, es: pi => Pippo, Pippa etc ma mi si presentano TUTTI i valori che ho nella mia tabella... dove sbaglio?

  Francesco

10/4/2009 10:52:28

Ho provato lo script funziona perfettamente con IE ma con Firefox non funziona e purtroppo la console degli errori non da nessuna indicazione....

Pensando ci fosse qualche problema nella mia installazione dello script ho provato la demo online... stesso problema...

Avete una soluzione? grazie

  Francesco

10/4/2009 10:54:10

Dimenticavo... ho convertito lo script php con "asp classic" e ripeto in IE funziona perfettamente

  Fabio

10/4/2009 10:59:41

@Francesco:
Mi pare strano..Io uso firefox e la demo online funziona. Hai firebug installato su firefox? Nella console puoi vedere cosa ti restituisce la chiamata alla pagina dei risultati, cosi da vedere se ci sono possibili errori.

  Francesco

10/4/2009 11:28:25

Ho visto in firebug ma la console è pulitissima...
Posso inviarti lo script, magari gli dai un'occhiata? te ne sarei veramente grato... :-)

  Fabio

10/4/2009 11:50:37

Prova a inviarlo dal form 'collabora'...
anke se il fatto ke nn ti funzioni neanke la demo ke a me funziona perfettamente in FF mi lascia perplesso..

  Fabio

10/4/2009 12:54:20

elimina la prima riga dal file autocomple.asp.
Quello che include il css e a me funziona.
Se vuoi modificare css includilo nella pagina index. Nella pagina caricata con ajax deve esserci solo l'elenco.

  Francesco

10/4/2009 15:18:46

Perfetto funziona benissimo... grazie infinite

  Francesco

15/5/2009 15:13:33

Ehm... posso sapere anche io a che linea ti riferisci del file autocomplete.asp??

a me va spettacolarmente (tra l'altro l'ho ottimizzato per passare l'ID selezionato in un campo hidden) ma con FIREFOX non fa niente..

cosa dovrei fare??

speriamo mi risponda qualcuno!!

grazie!

  Stefano

29/7/2009 9:36:53

Ciao!
Stavo provando lo script dell'autocompletamento, ma mi da l'errore "Ajax non definito".

Riesci ad aiutarmi?! Ti ho postato anche il link.
Grazie

  Stefano

29/7/2009 13:48:14

Ciao, sono lo stefano del messaggio precedente.
ho per scrupolo provato la pagina fatta in locale su iis7 e funziona... allora suppongo che sia il mio hoster a bloccare...
sai se aruba blocca questi tipi di script???

  Enzo

6/8/2009 9:37:16

Salve sono enzo,
vorrei utilizzare questo codice per delle evenieza ma il problema che io utilizzo java e non penso che possa utilizzare PHP....sapete come posso trasformarlo in javascript?grazie

  Luca

8/8/2009 18:35:36

Ciao,
sto utilizzando questo fantastico script e funziona molto bene ma avrei l'esigenza di rendere condizionata la ricerca.
Mi spiego ho due campi input text il primo compila il nome del comune sempre con l'autocomplete il secondo campo input text che chiamo via, utilizzarà sempre la funzione autocomplete ma deve inviare il risultato del primo input box.
Ho provato a fare così ma non restituisce nulla :

new Ajax.Autocompleter("via", "suggerimenti_squadra", "cerca.php?ricerca="+document.form1.comune.value, {minChars: 1});

qualche suggerimento, grazie


  Marco

26/8/2009 21:10:17

Complimenti Fabio, è proprio quello che cercavo !!!

Solo una domanda in merito al "str_replace" per la colorazione in grassetto (o simili).
str_replace è case sensitive e quindi non sempre evidenzia le lettere se non le si mette in maiuscolo/minuscolo come sono nella lista ...

c'è un sistema x ovviare a ciò ?

ciao e grazie mille

  Roberto

20/9/2009 21:27:45

Ciao, mi associo ai complimenti che hai già ricevuto da tutti...
Lo script funziona perfettamente.
Volevo sapere se è possibile fare in modo da avere un solo risultato suggerito con eventualmente anche le quantità di volte questo è presente nella ricerca.
Chiedo questo perchè ho vari risultati con lo stesso nome e, visto che si tratta di un campo di ricerca semplice, non vorrei dasse per 20 volte lo stesso risultato.
Grazie


  Andrea

8/10/2009 1:03:11

Ciao, sto cercando di utilizzare lo script in asp ma ho alcune difficoltà, posto la mia conversione del file cerca.php in asp:


<script type="text/javascript">

$arraysquadre=array();

<%
sql="select * from utenti order by user "
set rs=conn.execute(sql)
do until rs.EOF
%>array_push($arraysquadre,'<%=rs("user")%>');
<%
rs.movenext
loop
%>



sort($arraysquadre);
</script>

<ul>
<script type="text/javascript">
for($a=0;$a<count($arraysquadre);$a++){
if(substr_count($arraysquadre[$a],$squadra)>0){
echo "<li>".$arraysquadre[$a]."</li>";
}

}
</script>
</ul>

Dove sbaglio?

  Marco

21/12/2009 15:50:06

Ho un problema..Ho scaricato questo script e ho scaricato la libreria da scriptacolous creando una cartella ajax e mettendo i 3 file all'interno. Ho messo tutto online ma non mi escono i suggerimenti. Premetto che ho lasciato il codice cosi come era perchè mi vorrei studiare il funzionamento ma non mi escono fuori e suggerimenti delle squadre. Come posso fare?

  Marco

21/12/2009 15:55:30

Ho notato che mettendo questo codice

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.1");
</script>

Mi funziona..MA perchè non mi carica quelli che ho messo nella cartella ajax? Non c'è modo di utilizzarli? Ma potrei anche lasciare cosi?


  Fabio

21/12/2009 19:37:02

quel codice carica le librerie direttamente dai server di google e ottieni maggiore velocità nel caricamento delle librerie

  beppe

18/1/2010 18:23:50

Ciao, ho provato lo script dell'autocompletamento, funziona benissimo con FF ma non con IE. Dove sbaglio?
Grazie

  beppe

18/1/2010 18:47:15

Scusate mi sono espresso male, non vedo la tendina con i nomi filtrati. Ciao


  Marco

30/4/2010 15:05:24

Ragazzi non riesco a fare una cosa...
Vorrei filtrare la ricerca con 3 campi radio ma non riesco ad inviarli allo script! Ho scoperto come mandare una variabile in più ma non il valore di un campo radio... Come posso fare?

Per inviare una variabile ho aggiunto l'attributo parameters in questo modo:


<script type="text/javascript">new Ajax.Autocompleter("ricerca","div_ricerca","cerca.php",{minChars: 1,parameters:'search=<?=$search_type?>' }); </script>


Ma per inserire il valore di un campo radio che poi mi faccia la ricerca e quindi l'autocompletamento in base alla radio cliccata come si fa?

Ponendo che questi siano i miei campi radio:

<tr>
<td><input type="radio" name="rad_ricerca" value="titolo"> Nel titolo</td>
</tr>
<tr>
<td><input type="radio" name="rad_ricerca" value="testo"> Nel Testo</td>
</tr>
<tr>
<td><input type="radio" name="rad_ricerca" value="username"> Per Username</td>
</tr>


  PR

26/7/2010 8:49:01

Ciao a tutti. Ottimo questo script... ma i file .js ndo stanno?

  Pino

18/10/2011 7:46:53

Per PR:
******** i file devi scaricare!!!

  luca

19/10/2011 11:17:07

Ottimo script, ma come faccio a convertire tutto in asp?
Grazie

  Antonio

21/11/2011 14:55:39

Grazie per lo script, ma scusate l'ignoranza... dov'è il post che passa il valore a cerca.php? (nel mio caso è cerca.asp)
Devo mettere la input in un form?

  bog

12/12/2011 20:31:24

Caio a tutti, ho scricato il codice e ho provato ad eseguirlo adattandolo al mio caso. Putroppo non funziona... dovo apre indagato in dettaglio sono giunto a questo problema:

prendo il file cerca.php e lo modifico così:


<?
if(isset($_POST['squadra']))
{$squadra=$_POST['squadra'];}
else {$squadra="z";}
$conn=mysql_connect("localhost","root","prova");
if (!$conn) {
die('Could not connect: ' . mysql_error());
}echo 'Connected successfully to the database<br>';
$link=mysql_select_db("cpc",$conn);
if (!$link) {
die ('Canot use link : ' . mysql_error());
}echo 'Connected successfully a cpc<br>';
$query="select nome from cibi where nome like '%$squadra%'";
echo "query da eseguire: ".$query."<br>";
$result = mysql_query ($query);
if(!$result){die('invalid query: '. mysql_error());}
$ArrayRisultati=Array();
while ($risultati = mysql_fetch_array ($result)){
array_push($ArrayRisultati,$risultati) ;
}
echo "<ul>";
for($a=0;$a<count($ArrayRisultati);$a++){
echo "<li>".$ArrayRisultati[$a]['nome']."</li>";
}
echo "</ul>";
?>

questa pagina la vado a richiamare direttamente dal browser: "localhost/cerca.php"
e come risultato mi da :
zucca
prezemolo
..infatti i cibi che contengono la "z" sono cuei 2!!
ma se lo faccio tramite index.html sembra che non aggiorni... che non scriva niente.. non funziona nulla, non da segni di vita :)
consigli?

  bog

12/12/2011 23:05:37

ho risolto!!
ho dovuto modificare il codice di cerca.php in seguente modo:

<?
if(isset($_POST['squadra']))
{$squadra=$_POST['squadra'];}
else {$squadra="z";}
$conn=mysql_connect("localhost","root","root");
if (!$conn) {
die('Could not connect: ' . mysql_error());
}

$link=mysql_select_db("cpc",$conn);
if (!$link) {
die ('Canot use link : ' . mysql_error());
}
$query="select nome from ingredienti where nome like '%$squadra%'";

$result = mysql_query ($query);
if(!$result){die('invalid query: '. mysql_error());}
$ArrayRisultati=Array();
echo "<ul>";
while ($risultati = mysql_fetch_array ($result)){
echo "<li>".$risultati["nome"]."</li>";
}
echo "</ul>";
?>

gli echo di php non li prendeva bene...

  bog

12/12/2011 23:07:19

else {$squadra="z";}

in realta' deve essere cambiato in:

else {$squadra="";}

  Antonio

11/4/2012 11:41:23

Ciao spero potrai aiutarmi!
io vorrei un campo di testo dove inserendo un qualsiasi carattere si visualizzi una lista di parole statiche, senza pertanto che ad una determinata lettera corrisponda la lista di solo alcune parole ma una lista predeterminata che compare al momento della scrittura..sapresti aiutarmi? grazie mille!

  Antonio

11/4/2012 11:41:42

Ciao spero potrai aiutarmi!
io vorrei un campo di testo dove inserendo un qualsiasi carattere si visualizzi una lista di parole statiche, senza pertanto che ad una determinata lettera corrisponda la lista di solo alcune parole ma una lista predeterminata che compare al momento della scrittura..sapresti aiutarmi? grazie mille!



Lascia un commento


Codice di controllo*:
Nome*:
Email/Link:
Testo*:
 
I campi contrassegnati con * sono obbligatori.