Script ajax: Suggerimenti autocomplete con scriptaculous
difficoltà:
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"/>Il div suggerimenti_squadra sarà quello che visualizza i risultati della ricerca, quindi i suggerimenti.
<div id="suggerimenti_squadra" class="boxsuggerimenti"></div>
<script type="text/javascript">new Ajax.Autocompleter("squadra", "suggerimenti_squadra", "cerca.php", {minChars: 1});</script>
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>E nel file cerca.php che succede?
<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>
Facciamo finta che sia un file statico. Al cui interno scriviamo solo:
<ul>in pratica ogni volta che digitiamo qualcosa nel box di suggerimento vedremo sempre i due suggerimenti milan e inter.
<li>milan</li>
<li>inter</li>
</ul>
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 nomeoppure per trovare solo quelle che iniziano con il temine:
select nome from squadre where nome like '$squadra%' order by nomefacciamo 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>";
?>
Permalink:
Tag:
Script Simili:
Script ajax: Drag and drop con scriptaculous
Script ajax: Drag and drop con scriptaculous e salvataggio posizione
Script ajax: Aggiungere elementi a una pagina web con scriptaculous
Script ajax: Aggiungere e rimuovere elementi ordinabili con scriptaculous
Link utili:
Vota:
Commenti
22/3/2007 12:48:45
sistemato :-) grazie.
24/4/2007 15:48:32
Rapido ed indolore - ottimo lavoro, complimentoni!
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
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>";
}
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!
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)???
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>";
}
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! :)
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.
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...
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
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
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
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();
7/10/2008 11:26:31
Ottimo lavoro, si potrebbe avere un esempio in asp 3.0?
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
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?
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
10/4/2009 10:54:10
Dimenticavo... ho convertito lo script php con "asp classic" e ripeto in IE funziona perfettamente
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.
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... :-)
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..
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.
10/4/2009 15:18:46
Perfetto funziona benissimo... grazie infinite
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!
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
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???
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
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
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
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
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?
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?
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?
21/12/2009 19:37:02
quel codice carica le librerie direttamente dai server di google e ottieni maggiore velocità nel caricamento delle librerie
18/1/2010 18:23:50
Ciao, ho provato lo script dell'autocompletamento, funziona benissimo con FF ma non con IE. Dove sbaglio?
Grazie
18/1/2010 18:47:15
Scusate mi sono espresso male, non vedo la tendina con i nomi filtrati. Ciao
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>
Feed Rss
22/3/2007 12:34:31
Bel lavoro come sempre.
Occhio, nella parte relativa al Db l'array da contare è ArrayRisultati