A searchbar is a <form class="searchbar"> with an input, a clear button and a disable button (a round X on iOS, a back arrow on Material). searchbar-init creates it from data- attributes at page init, or you call app.searchbar.create(). Pointed at a container, it filters the DOM for you:
| Parameter | Default | Meaning |
|---|---|---|
| searchContainer | none | Element whose items are filtered |
| searchItem | 'li' | Selector for one item |
| searchIn | the item | Where inside an item to look |
| customSearch | false | Only fire events; you filter |
| backdrop | true | Dim the content while empty |
Items that fail get the class hidden-by-searchbar. Group titles and .list-group blocks with nothing left are hidden too, elements marked searchbar-ignore never are, and Framework7 572,986 shows the page's searchbar-found or searchbar-not-found element as the result count changes. For server results, set customSearch: true and render the matches yourself in a searchbar:search handler.