jQuery Mobile: conceptos básicos de filtrado

Descripción

Puedes configurar data-filteratributo a verdadero en una vista de lista para crear un filtro para sus elementos de la lista.

Para ingresar la cadena de búsqueda, debe proporcionar un campo de texto en su marcado y filtrable hace uso de él dando un selector para acceder al valor del campo de texto del atributo de entrada de datos.

Ejemplo

El siguiente ejemplo demuestra el uso de filtrado básico en jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <title>Filterable basics</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>
      <form class = "ui-filterable">
         <input id = "filterBasic-input" data-type = "search">
      </form>
      
      <ul data-role = "listview" data-filter = "true" data-input = "#filterBasic-input">
         <li>Audi</li>
         <li>Benz</li>
         <li>BMW</li>
         <li>Datsun</li>
         <li>Ferrari</li>
         <li>Ford</li>
         <li>Mahindra</li>
         <li>Maruti Suzuki</li>
         <li>Renault</li>
         <li>Volkswagen</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_basic.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/filterable_basic.html y se mostrará el siguiente resultado.

↰ Previous page