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




3 comentarios, 1 referencias
+
#