-
Get Started
-
Vue Components
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List
Searchbar Vue Component
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 |
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 |
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 |
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-foud-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 | true | Enables searchbar backdrop element |
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
Here is how it can be used in Vue component with initialization
<template>
<f7-page>
<!-- Searchbar -->
<f7-searchbar
disable-link-text="Cancel"
search-container="#search-list"
placeholder="Search in items"
:clear-button="true"
@searchbar:search="onSearch"
@searchbar:enable="onEnable"
@searchbar:disable="onDisable"
@searchbar:clear="onClear"
></f7-searchbar>
<!-- Will be visible if there is no any results found, defined by "searchbar-not-found" class -->
<f7-list class="searchbar-not-found">
<f7-list-item title="Nothing found"></f7-list-item>
</f7-list>
<!-- Search through this list -->
<f7-list class="searchbar-found" id="search-list">
<f7-list-item v-for="item in items" :title="'Item ' + item"></f7-list-item>
</f7-list>
</f7-page>
</template>
<script>
export default {
data: function () {
return {
items: (function () {
var it = [];
for (var i = 0; i < 100; i++) it.push(i+1);
return it;
})()
}
},
methods: {
onSearch: function (searchbar, query, previousQuery) {
console.log('search', query);
},
onClear: function (event) {
console.log('clear');
},
onEnable: function (event) {
console.log('enable');
},
onDisable: function (event) {
console.log('disable');
},
}
}
</script>