lunes, 15 de julio de 2013

Jquery Mobile autocomplete - lista de autocompletado

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


Jquery Mobile



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