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.