Contenido

Script.aculo.us selectBox, mejorando los select

27 oct

+ 3

La gente de script.aculo.us, estará contenta, ya que su librería pese a ser una de las más pesadas de la red, tambien es de las más usadas. Y esta versión de <select></select> demuestra que la gente la usa y desarrolla para ella.

¿Como usarla? 

El uso es bastante simple. Para empezar añadimos los ficheros que necesitamos a nuestro HTML. 

<script type="text/javascript" src="/javascripts/prototype.js"> </script>
<script type="text/javascript" src="/javascripts/scriptaculos.js"> </script>

<script type="text/javascript" src="/javascripts/extension.js"> </script>


<link href="/styles/autocomplete.css" rel="stylesheet" type="text/css"></link>

 Despues crearemos en nuestro HTML una estructura similar a esta.

<input type="text" id="autocomplete" name="autocomplete_parameter"/>
<input type="hidden" id="autocomplete_value" name="autocomplete_value"/>
<div id="autocomplete_choices" class="autocomplete"></div>

Entonces únicamente nos quedará lanzar la petición en javascript para que esto funcione.

new Ajax.SelectBox('autocomplete', 'autocomplete_choices', 'URI_on_server','autocomplete_value');	

Y la respuesta del servidor, que tendremos que montar una página que nos devuelva los resultados, nos creará una estructura en forma de lista <ul></ul> con la lista de elementos que mostrará nuestro <select></select>.

<ul>
	<li id="1">option 1</li>
	<li id="2">option 2</li>
	<li id="3">option 3</li>
	<li id="4">option 4</li>
</ul>

 Descargar

  • Hola, este script lo hice en un par de horas, solo por una necesidad para un proyecto, el buen punto es la respuesta que ha recibido, y estoy mejorandolo y arreglando bugs.

    El mayor problema/beneficio, es que hereda de autocomplete, y beneficio porque uso todo lo relacionado al DIV que seria para las opciones (como la navegacion por teclado), pero tiene sus contras como el tiempo que Ajax tiene en encontrar estas opciones en el servidor…

    Seguramente con ayuda de algunas personas interesadas algo interesante puede salir de este script.

  • Gabriel, es una pasada lo que has hecho. Normal que haya tenido tanto revuelo. :D

    Un saludo y enhorabuena :D

  • Estoy analizando que va a ser del futuro de un script similar a este, y por ahora las ganas estan puestas en hacer algo no obstrusivo, para separar las capas logicas, que me parece lo mas adecuado…

    Igualmente me sirvio para darme cuenta que muchos programadores usan Safari, y no lo pude probar nunca en safari porque no tengo una MAC :P

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.