Framework7 - Suchleiste

Beschreibung

Framework 7 ermöglicht das Durchsuchen der Elemente mithilfe der Suchleistenklasse .

Suchleistenparameter

S.No. Parameter & Beschreibung Art Standard
1

searchList

Es durchsucht den CSS-Selektor oder das HTML-Element der Liste.

Zeichenfolge oder HTML-Element - -
2

searchIn

Sie können die Listenansichtselemente von CSS-Selektoren durchsuchen und die Elemente durchsuchen , indem Sie die Klassen .item-title und .item-text übergeben .

Zeichenfolge '.item-title'
3

found

Es durchsucht den CSS-Selektor oder das HTML-Element mit dem Element "found". Außerdem wird das Element .searchbar-found verwendet, wenn kein Element angegeben ist.

Zeichenfolge oder HTML-Element - -
4

notfound

Es durchsucht den CSS-Selektor oder das HTML-Element mit dem Element "nicht gefunden". Außerdem wird das Element .searchbar-not-found verwendet, wenn kein Element angegeben ist.

Zeichenfolge oder HTML-Element - -
5

overlay

Es durchsucht das CSS - Selektor oder HTML - Element „searchbar Overlay“ Element und Anwendungen mit .searchbar-Overlay - Elemente, wenn es kein Element angegeben.

Zeichenfolge oder HTML-Element - -
6

ignore

Sie können die CSS-Auswahl für Elemente mithilfe der Suchleiste ignorieren.

Zeichenfolge '.searchbar-ignore'
7

customSearch

Wenn diese Option aktiviert ist, durchsucht die Suchleiste keinen der in searchList angegebenen Listenblöcke und Sie können benutzerdefinierte Suchfunktionen verwenden.

Boolescher Wert falsch
8

removeDiacritics

Entfernen Sie bei der Suche nach einem Element die diakritischen Zeichen, indem Sie diesen Parameter aktivieren.

Boolescher Wert falsch
9

hideDividers

Dieser Parameter blendet Elementteiler und Gruppentitel aus, wenn keine Elemente vorhanden sind.

Boolescher Wert wahr
10

hideGroups

Dieser Parameter blendet die Gruppen aus, wenn in den Listenansichtsgruppen keine Elemente gefunden wurden.

Boolescher Wert wahr

Rückrufe in der Suchleiste

S.No. Rückrufe & Beschreibung Art Standard
1

onSearch

Diese Methode löst während der Suche die Rückruffunktion aus.

Funktion (en) - -
2

onEnable

Diese Methode löst die Rückruffunktion aus, wenn die Suchleiste aktiv wird.

Funktion (en) - -
3

onDisable

Diese Methode löst die Rückruffunktion aus, wenn die Suchleiste inaktiv wird.

Funktion (en) - -
4

onClear

Diese Methode löst die Rückruffunktion aus, wenn Sie auf das Element "Löschen" klicken.

Funktion (en) - -

Eigenschaften der Suchleiste

S.No. Eigenschaften & Beschreibung
1

mySearchbar.params

Stellt die initialisierten Parameter dar, die mit dem Objekt übergeben wurden.

2

mySearchbar.query

Durchsucht die aktuelle Abfrage.

3

mySearchbar.searchList

Definiert den Suchlistenblock.

4

mySearchbar.container

Definiert den Suchleistencontainer mit HTML-Element.

5

mySearchbar.input

Definiert die Eingabe in die Suchleiste mit dem HTML-Element.

6

mySearchbar.active

Es definiert, ob die Suchleiste aktiviert oder deaktiviert ist.

Suchleistenmethoden

S.No. Methoden & Beschreibung
1

mySearchbar.search(query);

Diese Methode durchsucht die übergebene Abfrage.

2

mySearchbar.enable();

Es aktiviert die Suchleiste.

3

mySearchbar.disable();

Es deaktiviert die Suchleiste.

4

mySearchbar.clear();

Sie können die Abfrage- und Suchergebnisse löschen.

5

mySearchbar.destroy();

Es zerstört die Suchleisteninstanz.

Suchleiste JavaScript-Ereignisse

S.No. Eventbeschreibung Ziel
1

search

Sie können dieses Ereignis auslösen, während Sie nach Elementen suchen.

<div class = "list-block">
2

clearSearch

Dieses Ereignis wird ausgelöst, wenn der Benutzer auf das clearSearch-Element klickt.

<div class = "list-block">
3

enableSearch

Wenn die Suchleiste aktiviert wird, wird dieses Ereignis ausgelöst.

<div class = "list-block">
4

disableSearch

Wenn die Suchleiste deaktiviert wird und der Benutzer auf die Schaltfläche "Abbrechen" oder das Element "Suchleistenüberlagerung" klickt, wird dieses Ereignis ausgelöst.

<div class = "list-block">

Beispiel

Das folgende Beispiel zeigt die Verwendung der Suchleiste beim Scrollen in Framework7 -

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Search Bar Layout</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages navbar-fixed">
               <div data-page = "home" class = "page">
               
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "center sliding">Search Bar Layout</div>
                     </div>
                  </div>
                  
                  <form data-search-list = ".list-block-search" data-search-in = ".item-title" 
                     class = "searchbar searchbar-init">
                     <div class = "searchbar-input">
                        <input type = "search" placeholder = "Search"><a href = "#" 
                           class = "searchbar-clear"></a>
                     </div>
                     <a href = "#" class = "searchbar-cancel">Cancel</a>
                  </form>
                  
                  <div class = "searchbar-overlay"></div>
                  
                  <div class = "page-content">
                     <div class = "content-block searchbar-not-found">
                        <div class = "content-block-inner">No element found...</div>
                     </div>
                     
                     <div class = "list-block list-block-search searchbar-found">
                        <ul>
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">India</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Argentina</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Belgium</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Brazil</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Canada</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Colombia</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Denmark</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Ecuador</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">France</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Germany</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Greece</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Haiti</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Hong Kong</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Iceland</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Ireland</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Jamaica</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Japan</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Kenya</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Kuwait</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Libya</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Liberia</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Malaysia</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Mauritius</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Mexico</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Namibia</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">New Zealand</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Oman</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Paraguay</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Philippines</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Russia</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Singapore</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">South Africa</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Thailand</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">United Kingdom</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Vatican City</div>
                              </div>
                           </li>
                           
                           <li class = "item-content">
                              <div class = "item-inner">
                                 <div class = "item-title">Zimbabwe</div>
                              </div>
                           </li>
                        </ul>
                     </div>
                     
                  </div>
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
      
      <script>
         var myApp = new Framework7();
         var mainView = myApp.addView('.view-main');
      </script>
   </body>

</html>

Ausgabe

Lassen Sie uns die folgenden Schritte ausführen, um zu sehen, wie der oben angegebene Code funktioniert:

  • Speichern Sie den oben angegebenen HTML-Code search_bar.html Datei in Ihrem Server-Stammordner.

  • Öffnen Sie diese HTML-Datei als http: //localhost/search_bar.html und die Ausgabe wird wie unten gezeigt angezeigt.

  • Wenn das in der Liste enthaltene Element in die Suchleiste eingegeben wird, wird dieses bestimmte Element aus der Liste angezeigt.

  • Wenn das andere Element als die in der Liste enthaltenen Elemente eingegeben wird, wird kein gefundenes Element angezeigt.