jQuery Mobile: procesamiento previo filtrable

Descripción

El widget filtrable ejecuta el filtro una vez durante el inicio para garantizar que la lista secundaria devuelva el valor ingresado en la entrada de búsqueda. Para evitar esto, especifique el atributo de datos mejorados = "verdadero".

Siempre que este atributo se establece en verdadero, se asume que ha aplicado correctamente la clase uiscreen a los elementos secundarios que deben estar ocultos inicialmente. El widget filtrable utiliza la entrada de búsqueda para determinar si la entrada de búsqueda se ha renderizado previamente o no.

El siguiente ejemplo procesa previamente tanto la entrada de búsqueda como el filtrable.

Ejemplo

El siguiente ejemplo demuestra el uso de la representación previa filtrable en jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <title>Filterable Pre-rendering</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>
         <div class = "ui-input-search ui-body-inherit ui-corner-all 
            ui-shadow-inset ui-input-has-clear">
            <input data-type = "search" data-enhanced = "true" data-inset = "false" 
               id = "pre-rendered-example-input" placeholder = "search cars..." value = "or" />
         </div>
         
         <div data-role = "controlgroup" data-enhanced = "true" data-filter = "true" 
            data-filter-reveal = "true" data-input = "#pre-rendered-example-input" 
            class = "ui-controlgroup ui-controlgroup-vertical ui-corner-all">
            <div class = "ui-controlgroup-controls">
               <a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-shadow 
                  ui-screen-hidden">Audi</a>
               <a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-first-child 
                  ui-shadow ui-last-child">Ford</a>
               <a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-shadow 
                  ui-screen-hidden">Hyundai</a>
               <a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-shadow 
                  ui-screen-hidden">Tata</a>
            </div>
         </div>
      </form>
      
   </body>
</html>

Salida

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

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

↰ Previous page