jQuery Mobile - Pré-renderização filtrável

Descrição

O widget filtrável executa o filtro uma vez durante a inicialização para garantir que a lista de filhos retorne o valor inserido na entrada de pesquisa. Para evitar isso, especifique o atributo data-Enhanced = "true".

Sempre que este atributo é definido como verdadeiro, presume-se que você aplicou corretamente a classe uiscreen aos filhos que devem ser ocultados inicialmente. O widget filtrável usa a entrada de pesquisa para determinar se a entrada de pesquisa foi pré-renderizada ou não.

O exemplo a seguir pré-renderiza a entrada de pesquisa e a filtrável.

Exemplo

O exemplo a seguir demonstra o uso de pré-renderização filtrável no 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>

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código acima -

Salve o código html acima como filterable_prerendering.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/filterable_prerendering.html e a seguinte saída será exibida.

↰ Previous page