Listview Fornisce contenuti di ricerca più ricchi

Descrizione

Inserisci data-filtertextattributo in un particolare elemento dell'elenco, per trovare contro contenuto diverso che è popolare con uno o più nomi. Aiuta ad abbinare quel contenuto quando la parola viene inserita nella casella di ricerca.

Esempio

L'esempio seguente dimostra l'uso di fornire contenuti di ricerca più ricchi nell'elenco in 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>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice html sopra come listview_richer_search_content.html file nella cartella principale del server.

  • Apri questo file HTML come http: //localhost/listview_richer_search_content.html e verrà visualizzato il seguente output.

  • Digita IT, it, comp, companies, auto ecc per vedere i risultati.