Todos los elementos que tienen más de un elemento hijo, pueden ser filtrados.
Cómo crear un campo de búsqueda:
- El elemento que desea filtrar, debe incluir el atributo data-filter = "true".
- Cree un elemento <input> con un id especificado y agregue el atributo data-type = "search". Esto creará un campo de búsqueda básico. Envuelva el <input> en un formulario y agregue la clase "ui-filterable" al elemento <form>; esto ajustará el margen entre el campo de búsqueda y el elemento filtrable.
- Luego, agregue el atributo de entrada de datos al elemento filtrable. Su valor debe coincidir con el id del elemento <input>.
A continuación, hemos creado una vista de lista filtrable:
<form class="ui-filterable">
<input id="myFilter" data-type="search">
</form>
<ul data-role="listview" data-filter="true" data-input="#myFilter">
<li><a href="#">Adele</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Calvin</a></li>
</ul>
<input id="myFilter" data-type="search">
</form>
<ul data-role="listview" data-filter="true" data-input="#myFilter">
<li><a href="#">Adele</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Calvin</a></li>
</ul>
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<h2>My Phonebook</h2>
<form class="ui-filterable">
<input id="myFilter" data-type="search">
</form>
<ul data-role="listview" data-filter="true" data-input="#myFilter" data-autodividers="true" data-inset="true">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Albert</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Cameron</a></li>
<li><a href="#">Chloe</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Diana</a></li>
<li><a href="#">Gabriel</a></li>
<li><a href="#">Glen</a></li>
<li><a href="#">Ralph</a></li>
<li><a href="#">Valarie</a></li>
</ul>
</div>
</div>
</body>
</html>
Resultado:
Consejo: use un marcador de posición para especificar una sugerencia corta que describa el valor esperado del campo de búsqueda:
Ejemplo
<input id="myFilter" data-type="search" placeholder="Search for names..">
No hay comentarios:
Publicar un comentario