Completamento automatico su un campo di testo

Con questo script vedremo è possibile implementare un completamento automatico su un campo di testo di un form usando la libreria script.aculo.us. Per realizzare un motore di ricerca interno al sito e possibile attingere i dati da un database per visualizzali in un menù a discesa, quando l'utente inizia a scrivere nel campo di ricerca.

Per prima cosa scarichiamo le librerie script.aculo.us.  file zip  68 KByte

Con il codice seguente le richiamiano nella nostra pagina di ricerca

<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>

Nelle prime righe abbiamo creato il campo di ricerca e nelle righe successive abbiamo creato un foglio di stile class="boxsuggerimenti"  per configurare il menù a discesa

Lo script finale apre la pagina cerca.asp  che si occupa di filtrare i dati del database in base ai dati che inserisce l'utente nel campo di ricerca.

Noi abbiamo utilizzato una pagina  ASP ma è possibile utilizzare anche una pagina PHP se i dati sono su un database MYSQL

<form  method="post" action="cerca_pagina.asp" > <input type="text" id="cerca" name="cercanelsito"  size="25" /> <input type="submit" name="Submit" value="cerca">   </form>  <div id="suggerimenti" class="boxsuggerimenti"></div> <script type="text/javascript">new Ajax.Autocompleter("cerca", "suggerimenti", "ajax/cerca.asp", {minChars: 1});</script>

Il codice della pagina cerca.asp

<% cerca = request.form("cercanelsito") Dim obbccConn Set obbccConn = Server.CreateObject("ADODB.Connection") obbccconn.ConnectionString="DRIVER={Microsoft Access Driver (*.mdb)};DBQ=" & server.MapPath("nomedatabase.mdb") obbccConn.Open Dim stdccSQL stdccSQL = "select * from nometabella WHERE (titolo like'%" & cerca & "%')" Dim obbccRS Set obbccRS = Server.CreateObject("ADODB.Recordset") obbccRS.Open stdccSQL, obbccConn, 3, 3 DO While Not obbccRS.EOF response.write "<li>" & obbccRS("titolo") & "</li>" obbccRS.Movenext Loop obbccRS.Close Set obbccConn =Nothing

Clicca qui per visualizzare un esempio

Clicca qui per scaricare un esempio completo