Framework7 - Barra di ricerca
Descrizione
Framework 7 consente la ricerca degli elementi utilizzando la classe searchbar .
Parametri della barra di ricerca
| S.No | Parametri e descrizione | genere | Predefinito |
|---|---|---|---|
| 1 | searchList Cerca nel selettore CSS o nell'elemento HTML dell'elenco. |
stringa o elemento HTML | - |
| 2 | searchIn Puoi cercare gli elementi della visualizzazione elenco dei selettori CSS, anche cercare gli elementi passando le classi .item-title , .item-text . |
corda | '.Titolo dell'oggetto' |
| 3 | found Cerca nel selettore CSS o nell'elemento HTML utilizzando l'elemento "trovato". Inoltre, utilizza l' elemento .searchbar-found se non è specificato alcun elemento. |
stringa o elemento HTML | - |
| 4 | notfound Cerca nel selettore CSS o nell'elemento HTML utilizzando l'elemento "non trovato". Inoltre, utilizza l' elemento .searchbar-not-found se non è specificato alcun elemento. |
stringa o elemento HTML | - |
| 5 | overlay Cerca nel selettore CSS o nell'elemento HTML utilizzando l'elemento "searchbar overlay" e utilizza l'elemento .searchbar-overlay , se non è specificato alcun elemento. |
stringa o elemento HTML | - |
| 6 | ignore Puoi ignorare il selettore CSS per gli elementi utilizzando la barra di ricerca. |
corda | ".searchbar-ignore" |
| 7 | customSearch Quando è abilitata, la barra di ricerca non cercherà in nessuno dei blocchi di elenchi specificati da searchList e ti sarà consentito utilizzare la funzionalità di ricerca personalizzata. |
booleano | falso |
| 8 | removeDiacritics Durante la ricerca di un elemento, rimuovere i segni diacritici abilitando questo parametro. |
booleano | falso |
| 9 | hideDividers Questo parametro nasconderà i divisori degli elementi e il titolo del gruppo, se non ci sono elementi. |
booleano | vero |
| 10 | hideGroups Questo parametro nasconderà i gruppi, se non ci sono elementi trovati nei gruppi di visualizzazione elenco. |
booleano | vero |
Callback della barra di ricerca
| S.No | Richiami e descrizione | genere | Predefinito |
|---|---|---|---|
| 1 | onSearch Questo metodo attiverà la funzione di callback durante la ricerca. |
funzione (i) | - |
| 2 | onEnable Questo metodo attiverà la funzione di callback quando la barra di ricerca diventa attiva. |
funzione (i) | - |
| 3 | onDisable Questo metodo attiverà la funzione di callback quando la barra di ricerca diventa inattiva. |
funzione (i) | - |
| 4 | onClear Questo metodo attiverà la funzione di callback quando fai clic sull'elemento "cancella". |
funzione (i) | - |
Proprietà della barra di ricerca
| S.No | Proprietà e descrizione |
|---|---|
| 1 | mySearchbar.params Rappresenta i parametri inizializzati passati con object. |
| 2 | mySearchbar.query Cerca la query corrente. |
| 3 | mySearchbar.searchList Definisce il blocco dell'elenco di ricerca. |
| 4 | mySearchbar.container Definisce il contenitore della barra di ricerca con l'elemento HTML. |
| 5 | mySearchbar.input Definisce l'input della barra di ricerca con l'elemento HTML. |
| 6 | mySearchbar.active Definisce se la barra di ricerca è abilitata o disabilitata. |
Metodi della barra di ricerca
| S.No | Metodi e descrizione |
|---|---|
| 1 | mySearchbar.search(query); Questo metodo ricerca la query passata. |
| 2 | mySearchbar.enable(); Abilita la barra di ricerca. |
| 3 | mySearchbar.disable(); Disabilita la barra di ricerca. |
| 4 | mySearchbar.clear(); Puoi cancellare la query e i risultati della ricerca. |
| 5 | mySearchbar.destroy(); Distrugge l'istanza della barra di ricerca. |
Eventi JavaScript nella barra di ricerca
| S.No | Descrizione dell'evento | Bersaglio |
|---|---|---|
| 1 | search Puoi attivare questo evento durante la ricerca di elementi. |
<div class = "list-block"> |
| 2 | clearSearch Questo evento verrà generato quando l'utente fa clic sull'elemento clearSearch. |
<div class = "list-block"> |
| 3 | enableSearch Quando la barra di ricerca diventa abilitata, questo evento verrà attivato. |
<div class = "list-block"> |
| 4 | disableSearch Quando la barra di ricerca viene disattivata e l'utente fa clic sul pulsante Annulla o sull'elemento "barra di ricerca-overlay", questo evento viene attivato. |
<div class = "list-block"> |
Esempio
L'esempio seguente mostra l'uso della barra di ricerca durante lo scorrimento nel 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>Produzione
Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:
Salva il codice HTML sopra indicato search_bar.html file nella cartella principale del server.
Apri questo file HTML come http: //localhost/search_bar.html e l'output viene visualizzato come mostrato di seguito.
Se l'elemento contenuto nella lista viene inserito nella barra di ricerca, mostra quel particolare elemento dalla lista.
Se viene inserito un elemento diverso dagli elementi contenuti nell'elenco, non viene visualizzato alcun elemento trovato.