Autocompletar con scriptaculous
Lo que vamos a hacer es un cuadro search box como el google suggest, que a diferencia de este, no haremos una petición ajax al servidor ya que tendremos los valores precargados en una variable javascript, útil cuando los registros son pocos y estáticos.
Reconozco que a estas alturas medio mundo usa jquery, pero como persona de escaso conocimiento en el área, para el propósito me sirvió prototype y scriptaculous.
Lo primero que tenemos que hacer es descargar scriptaculous, y extraemos todos los js dentro de una carpeta javascripts.
El siguiente paso es crear el archivo css.css para darle un diseño bonito al recuadro de opciones que aparecerán conforme vayamos escribiendo, el código de css.css es
div.autocomplete { margin:0px; padding:0px; width:250px; background:#fff; border:1px solid #888; position:absolute; } div.autocomplete ul { margin:0px; padding:0px; list-style-type:none; } div.autocomplete ul li.selected { background-color:#ffb; } div.autocomplete ul li { margin:0; padding:2px; height:32px; display:block; list-style-type:none; cursor:pointer; }
El tercer paso es crear el archivo autocompletar.html donde incluiremos los javascripts de prototype y scriptaculous, automáticamente se incluirán todas las dependencias.
<script type="text/javascript" src="javascripts/prototype.js"></script> <script type="text/javascript" src="javascripts/scriptaculous.js?load=effects,controls"> </script> <script type="text/javascript"> var bandsList = [ 'ABBA', 'AC/DC', 'Aerosmith', 'America', 'Bay City Rollers', 'Black Sabbath', 'Boston', 'David Bowie', 'Can', 'The Carpenters', 'Crass', 'Deep Purple', 'The Doobie Brothers', 'Eagles', 'Fleetwood Mac', 'Haciendo Punto en Otro Son', 'Heart', 'Iggy Pop and the Stooges', 'Journey', 'Judas Priest', 'KC and the Sunshine Band', 'Kiss', 'Kraftwerk', 'Led Zeppelin', 'Lindisfarne (band)', 'Lipps, Inc', 'Lynyrd Skynyrd', 'Pink Floyd', 'Queen', 'Ramones', 'REO Speedwagon', 'Rhythm Heritage', 'Rush', 'Sex Pistols', 'Slade', 'Steely Dan', 'Stillwater', 'Styx', 'Supertramp', 'Sweet', 'Three Dog Night', 'The Village People', 'Wings (fronted by former Beatle Paul McCartney)', 'Yes' </script><script type="text/javascript"> window.onload = function() { new Autocompleter.Local( 'bands_from_the_70s', 'band_list', bandsList, {ignoreCase:false} ); } </script> <body> <p> <label for="bands_from">Your favorite rock band from the 70's:</label> <br /> <input id="bands_from_the_70s" autocomplete="off" size="40" type="text" value="" /> </p> <div class="autocomplete" id="band_list" style="display:none"></div>
Y listo ya con eso debemos tener un textbox con sugerencias.
Enlaces
Autocompleter.Local para ver los parámetros aceptados.