Listview Proporciona contenido de búsqueda más rico

Descripción

Añadir data-filtertextatributo en un elemento de lista en particular, para buscar contenido diferente que sea popular por uno o varios nombres. Ayuda a coincidir con ese contenido cuando la palabra se inserta en el cuadro de búsqueda.

Ejemplo

El siguiente ejemplo demuestra el uso de proporcionar contenido de búsqueda más rico en la lista en jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <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>
      <h2>Listview providing richer search content example</h2>
      <form class = "ui-filterable">
         <input id = "autocomplete-input" data-type = "search" 
            placeholder = "Search Cities" />
      </form>
      
      <ul data-role = "listview" data-filter = "true" data-filter-reveal = "true" 
         data-input = "#autocomplete-input">
         <li data-filtertext = "IT companies"><a href = "#">Wipro</a></li>
         <li data-filtertext = "IT companies"><a href = "#">Infosys</a></li>
         <li data-filtertext = "IT companies"><a href = "#">Oracle</a></li>
         <li data-filtertext = "Automobiles company"><a href = "#">Tata</a></li>
         <li data-filtertext = "Automobiles company"><a href = "#">Volvo </a></li>
         <li data-filtertext = "Financial Company"><a href = "#">LIC Finance Limited</a></li>
         <li data-filtertext = "Financial Company"><a href = "#">L & T Finance Limited</a></li>
         <li data-filtertext = "IT companies"><a href = "#">TCS</a></li>
         <li data-filtertext = "Financial Company"><a href = "#">Birla Global Finance Limited</a></li>
         <li data-filtertext = "Automobiles company"><a href = "#">Mahindra </a></li>
         <li data-filtertext = "IT companies"><a href = "#">Tech Mahinder</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 listview_richer_search_content.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/listview_richer_search_content.html y se mostrará el siguiente resultado.
Escriba IT, it, comp, companies, auto, etc. para ver los resultados.

↰ Previous page