Autocomplete - Lista de autocompletado
Autocomplete es un componente de Jquery Mobile, que permite crear un campo de autocompletado, su función principal es la de añadir una lista de opciones para facilitar su búsqueda al usuario. Por ejemplo en una tienda de frutas, el usuario puede obtener una información más detallada del productos dirigiéndole a una url espécifica, ejemplo: index.php?fruta=naranjas
Para crear este componente se utilizar el atributo data-role con valor "listview", otro atributo es data-filter con valor true o false, si está en false el autocomplete se desactiva, otro atributo es data-filter-reveal con valor true o false, si es false, éste no desactiva la opción de autocomplete, pero si muestra la lista y por último el atributo data-filter-placeholder que es el texto que indica el contenido del autocomplete.
El código del ejemplo se encuentra debajo de la imagen ...
Autocomplete es un componente de Jquery Mobile, que permite crear un campo de autocompletado, su función principal es la de añadir una lista de opciones para facilitar su búsqueda al usuario. Por ejemplo en una tienda de frutas, el usuario puede obtener una información más detallada del productos dirigiéndole a una url espécifica, ejemplo: index.php?fruta=naranjas
Para crear este componente se utilizar el atributo data-role con valor "listview", otro atributo es data-filter con valor true o false, si está en false el autocomplete se desactiva, otro atributo es data-filter-reveal con valor true o false, si es false, éste no desactiva la opción de autocomplete, pero si muestra la lista y por último el atributo data-filter-placeholder que es el texto que indica el contenido del autocomplete.
El código del ejemplo se encuentra debajo de la imagen ...
<html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Autocomplete Jquery Mobile</h1> </div> <div data-role="content"> <ul data-role="listview" data-filter="true" data-filter-reveal="false" data-filter-placeholder="Busca tu fruta ..."> <li><a href="index.php?fruta=naranjas">Naranjas</a></li> <li><a href="index.php?fruta=melocotones">Melocotones</a></li> <li><a href="index.php?fruta=platanos">Plátanos</a></li> <li><a href="index.php?fruta=limones">Limones</a></li> <li><a href="index.php?fruta=melones">Melones</a></li> </ul> </div> <div data-role="footer"><h1>PIE DE PÁGINA</h1></div> </div> </body> </html>
No hay comentarios:
Publicar un comentario