Searchbar Vue Component
- Searchbar Components
- Searchbar Properties
- Searchbar Methods
- Searchbar Events
- Searchbar Slots
- Access To Searchbar Instance
- Examples
Searchbar Vue component represents Framework7's Searchbar component.
Searchbar Components
There are following components included:
f7-searchbar
Searchbar Properties
You can pass all parameters in single params
property or use separate props for each parameter to specify them via component attributes:
Prop | Type | Default | Description |
---|---|---|---|
<f7-searchbar> properties | |||
init | boolean | true | Initializes Searchbar |
value | string number | Allows to specify Searchbar input's value. Can be usefule when used with custom-search enabled | |
form | boolean | true | Main searchbar element will be used as a form tag instead of div |
placeholder | string | "Search" | Input placeholder text |
disable-button | boolean | true | Enables disable button |
disable-button-text | string | Cancel | Disable button text |
clear-button | boolean | true | Enables searchbar input clear button |
expandable | boolean | false | Enables expandable searchbar |
inline | boolean | false | Enables inline searchbar |
search-container | string object | CSS selector or HTML element of list block to search | |
search-in | string | .item-title | CSS selector of List View element's field where we need to search. Usually we search through element titles ('.item-title'). It is also to pass few elements for search like '.item-title, .item-text' |
search-item | string | li | CSS selector of single search item. If we do a search in List View, then it must be a single list element li |
search-group | string | .list-group | CSS selector of group element. Used when hide-groups enabled to hide groups. If we do a search in List View, then it usually a list group. |
search-group-title | string | .list-group-title, .item-divider | CSS selector of group titles and dividers. Used when hide-dividers enabled to hide group titles and dividers. If we do a search in List View, then it usually a list group title or list item divider. |
found-el | string object | .searchbar-found | CSS selector or HTMLElement of searchbar "found" element. If not specified, searchbar will look for .searchbar-found element on page |
not-found-el | string object | .searchbar-not-found | CSS selector or HTMLElement of searchbar "not-found" element. If not specified, searchbar will look for .searchbar-not-found element on page |
backdrop | boolean | Enables searchbar backdrop element. By default, disabled for Aurora theme or for inline searchbar | |
backdrop-el | string object | CSS selector or HTMLElement of searchbar backdrop element. If not passed and backdrop parameter is true then it will look for .searchbar-backdrop element. In case none found it will create one automatically | |
ignore | string | .searchbar-ignore | CSS selector for items to be ignored by searchbar and always present in search results |
custom-search | boolean | false | When enabled searchbar will not search through any of list blocks specified by search-container and you will be able to use custom search functionality, for example, for calling external APIs with search results and for displaying them manually |
remove-diacritics | boolean | false | Enable to remove/replace diacritics (á, í, ó, etc.) during search |
hide-dividers | boolean | true | If enabled, then search will consider item dividers and group titles and hide them if there are no found items right after them |
hide-groups | boolean | true | If enabled, then search will consider list view groups hide them if there are no found items inside of these groups |
no-shadow | boolean | false | Disable shadow rendering for MD theme |
no-hairline | boolean | false | Disable searchbar bottom thin border (hairline) for iOS theme |
Searchbar Methods
<f7-searchbar> methods | |
---|---|
.search(query) | Force searchbar to search passed query |
.enable() | Enable/activate searchbar |
.disable() | Disable/deactivate searchbar |
.toggle() | Toggle searchbar |
.clear() | Clear search query and update results |
Searchbar Events
Event | Arguments | Description |
---|---|---|
<f7-searchbar> events | ||
searchbar:search | (searchbar, query, previousQuery) | Event will be triggered during search (search field change). As an arguments event receives searchbar instance, search query and previous query |
searchbar:clear | (searchbar, previousQuery) | Event will be triggered when user clicks on Searchbar input "clear" button. As an arguments event receives searchbar instance and previous query |
searchbar:enable | (searchbar) | Event will be triggered when Searchbar becomes active |
searchbar:disable | (searchbar) | Event will be triggered when Searchbar becomes inactive/disabled |
change | (event) | Event will be triggered when "change" event occurs on searchbar input element |
input | (event) | Event will be triggered when "input" event occurs on searchbar input element |
focus | (event) | Event will be triggered when "focus" event occurs on searchbar input element |
blur | (event) | Event will be triggered when "blur" event occurs on searchbar input element |
click:clear | (event) | Event will be triggered when user clicks on input "clear" button |
click:disable | (event) | Event will be triggered when user clicks on searchbar disable button |
Searchbar Slots
Searchbar Vue component has additional slots for custom elements:
default
- element will be inserted as a child of<div class="searchbar-inner">
element in the end. Same asinner-end
slotbefore-inner
- element will be inserted right before<div class="searchbar-inner">
elementafter-inner
- element will be inserted right after<div class="searchbar-inner">
elementinner-start
- element will be inserted as a child of<div class="searchbar-inner">
element in the beginninginner-end
- element will be inserted as a child of<div class="searchbar-inner">
element in the endinput-wrap-start
- element will be inserted as a child of<div class="searchbar-input-wrap">
element in the beginninginput-wrap-end
- element will be inserted as a child of<div class="searchbar-input-wrap">
element in the end
Without Slots:
<f7-searchbar
disable-link-text="Cancel"
placeholder="Search in items"
:clear-button="true"
></f7-searchbar>
<!-- Renders to: -->
<form class="searchbar">
<div class="searchbar-inner">
<div class="searchbar-input-wrap">
<input type="search" placeholder="Search">
<i class="searchbar-icon"></i>
<span class="input-clear-button"></span>
</div>
<span class="searchbar-disable-button">Cancel</span>
</div>
</form>
With Slots:
<f7-searchbar
disable-link-text="Cancel"
placeholder="Search in items"
:clear-button="true"
>
<div slot="inner-start">Inner Start</div>
<div slot="inner-end">Inner End</div>
<div slot="input-wrap-start">Input Wrap Start</div>
<div slot="input-wrap-end">Input Wrap End</div>
<div slot="before-inner">Before Inner</div>
<div slot="after-inner">After Inner</div>
</f7-searchbar>
<!-- Renders to: -->
<form class="searchbar">
<div slot="before-inner">Before Inner</div>
<div class="searchbar-inner">
<div slot="inner-start">Inner Start</div>
<div class="searchbar-input-wrap">
<div slot="input-wrap-start">Input Wrap Start</div>
<input type="search" placeholder="Search">
<i class="searchbar-icon"></i>
<span class="input-clear-button"></span>
<div slot="input-wrap-end">Input Wrap End</div>
</div>
<span class="searchbar-disable-button">Cancel</span>
<div slot="inner-end">Inner End</div>
</div>
<div slot="after-inner">After Inner</div>
</form>
Access To Searchbar Instance
If you use automatic initalization to init Searchbar (with init:true
prop) and need to use Searchbar API you can access its initialized instance by accessing .f7Searchbar
component's property.
Examples
Usual Searchbar
<f7-page>
<f7-navbar title="Searchbar">
<f7-subnavbar :inner="false">
<f7-searchbar
search-container=".search-list"
search-in=".item-title"
:disable-button="!$theme.aurora"
></f7-searchbar>
</f7-subnavbar>
</f7-navbar>
<f7-list class="searchbar-not-found">
<f7-list-item title="Nothing found"></f7-list-item>
</f7-list>
<f7-list class="search-list searchbar-found">
<f7-list-item title="Acura"></f7-list-item>
<f7-list-item title="Audi"></f7-list-item>
<f7-list-item title="BMW"></f7-list-item>
<f7-list-item title="Cadillac "></f7-list-item>
<f7-list-item title="Chevrolet "></f7-list-item>
<f7-list-item title="Chrysler "></f7-list-item>
<f7-list-item title="Dodge "></f7-list-item>
<f7-list-item title="Ferrari "></f7-list-item>
<f7-list-item title="Ford "></f7-list-item>
<f7-list-item title="GMC "></f7-list-item>
<f7-list-item title="Honda"></f7-list-item>
<f7-list-item title="Hummer"></f7-list-item>
<f7-list-item title="Hyundai"></f7-list-item>
<f7-list-item title="Infiniti "></f7-list-item>
<f7-list-item title="Isuzu "></f7-list-item>
<f7-list-item title="Jaguar "></f7-list-item>
<f7-list-item title="Jeep "></f7-list-item>
<f7-list-item title="Kia"></f7-list-item>
<f7-list-item title="Lamborghini "></f7-list-item>
<f7-list-item title="Land Rover"></f7-list-item>
<f7-list-item title="Lexus "></f7-list-item>
<f7-list-item title="Lincoln "></f7-list-item>
<f7-list-item title="Lotus "></f7-list-item>
<f7-list-item title="Mazda"></f7-list-item>
<f7-list-item title="Mercedes-Benz"></f7-list-item>
<f7-list-item title="Mercury "></f7-list-item>
<f7-list-item title="Mitsubishi"></f7-list-item>
<f7-list-item title="Nissan "></f7-list-item>
<f7-list-item title="Oldsmobile "></f7-list-item>
<f7-list-item title="Peugeot "></f7-list-item>
<f7-list-item title="Pontiac "></f7-list-item>
<f7-list-item title="Porsche"></f7-list-item>
<f7-list-item title="Regal"></f7-list-item>
<f7-list-item title="Saab "></f7-list-item>
<f7-list-item title="Saturn "></f7-list-item>
<f7-list-item title="Subaru "></f7-list-item>
<f7-list-item title="Suzuki "></f7-list-item>
<f7-list-item title="Toyota"></f7-list-item>
<f7-list-item title="Volkswagen"></f7-list-item>
<f7-list-item title="Volvo"></f7-list-item>
</f7-list>
</f7-page>
Expandable Searchbar
<f7-page>
<f7-navbar title="Searchbar">
<f7-nav-right>
<f7-link class="searchbar-enable" data-searchbar=".searchbar-demo" icon-ios="f7:search" icon-aurora="f7:search" icon-md="material:search"></f7-link>
</f7-nav-right>
<f7-searchbar
class="searchbar-demo"
expandable
search-container=".search-list"
search-in=".item-title"
:disable-button="!$theme.aurora"
></f7-searchbar>
</f7-navbar>
<f7-list class="searchbar-not-found">
<f7-list-item title="Nothing found"></f7-list-item>
</f7-list>
<f7-list class="search-list searchbar-found">
<f7-list-item title="Acura"></f7-list-item>
<f7-list-item title="Audi"></f7-list-item>
<f7-list-item title="BMW"></f7-list-item>
<f7-list-item title="Cadillac "></f7-list-item>
<f7-list-item title="Chevrolet "></f7-list-item>
<f7-list-item title="Chrysler "></f7-list-item>
<f7-list-item title="Dodge "></f7-list-item>
<f7-list-item title="Ferrari "></f7-list-item>
<f7-list-item title="Ford "></f7-list-item>
<f7-list-item title="GMC "></f7-list-item>
<f7-list-item title="Honda"></f7-list-item>
<f7-list-item title="Hummer"></f7-list-item>
<f7-list-item title="Hyundai"></f7-list-item>
<f7-list-item title="Infiniti "></f7-list-item>
<f7-list-item title="Isuzu "></f7-list-item>
<f7-list-item title="Jaguar "></f7-list-item>
<f7-list-item title="Jeep "></f7-list-item>
<f7-list-item title="Kia"></f7-list-item>
<f7-list-item title="Lamborghini "></f7-list-item>
<f7-list-item title="Land Rover"></f7-list-item>
<f7-list-item title="Lexus "></f7-list-item>
<f7-list-item title="Lincoln "></f7-list-item>
<f7-list-item title="Lotus "></f7-list-item>
<f7-list-item title="Mazda"></f7-list-item>
<f7-list-item title="Mercedes-Benz"></f7-list-item>
<f7-list-item title="Mercury "></f7-list-item>
<f7-list-item title="Mitsubishi"></f7-list-item>
<f7-list-item title="Nissan "></f7-list-item>
<f7-list-item title="Oldsmobile "></f7-list-item>
<f7-list-item title="Peugeot "></f7-list-item>
<f7-list-item title="Pontiac "></f7-list-item>
<f7-list-item title="Porsche"></f7-list-item>
<f7-list-item title="Regal"></f7-list-item>
<f7-list-item title="Saab "></f7-list-item>
<f7-list-item title="Saturn "></f7-list-item>
<f7-list-item title="Subaru "></f7-list-item>
<f7-list-item title="Suzuki "></f7-list-item>
<f7-list-item title="Toyota"></f7-list-item>
<f7-list-item title="Volkswagen"></f7-list-item>
<f7-list-item title="Volvo"></f7-list-item>
</f7-list>
</f7-page>