jQuery Mobile - Revelación de filtros

Descripción

La función de revelación de filtro le permitirá crear un autocompletado simple fácilmente con datos locales.

Puedes usar data-filter-reveal = "true" atributo para ocultar automáticamente todos los elementos de la lista cuando el campo de texto utilizado para la búsqueda está en blanco.

Ejemplo

El siguiente ejemplo demuestra el uso de la revelación de filtros en jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <title>Filter Reveal</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <ul data-role = "listview" data-filter = "true" data-filter-reveal = "true" 
         data-filter-placeholder = "Search your products..." data-inset = "true">
         <li><a href = "#">Electronics</a></li>
         <li><a href = "#">Clothing</a></li>
         <li><a href = "#">Home and furnitures</a></li>
         <li><a href = "#">Media and books</a></li>
         <li><a href = "#">Babies and kids</a></li>
         <li><a href = "#">Mobile and tablets</a></li>
      </ul>
   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como filterable_reveal.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/filterable_reveal.html y se mostrará el siguiente resultado.

↰ Previous page