Search Bar Vue component represents Framework7's Search Bar component.
<f7-searchbar
cancel-link="Cancel"
placeholder="Search in items"
:clear-button="true"
></f7-searchbar>Renders to:
<form class="searchbar">
<div class="searchbar-input">
<!-- Input -->
<input type="search" placeholder="Search in items">
<!-- Clear button -->
<a href="#" class="searchbar-clear"></a>
</div>
<!-- Cancel Link -->
<div class="searchbar-cancel">Cancel</div>
</form>Here is how it can be used in Vue component with initialization
<template>
<!-- Search bar -->
<f7-searchbar
<!-- Cancel link's text (affects iOS theme only) -->
cancel-link="Cancel"
<!-- Where to search -->
search-list="#search-list"
<!-- Input placeholder text -->
placeholder="Search in items"
<!-- Show "clear" button -->
:clear-button="true"
<!-- Events -->
@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 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>
</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 (query, found) {
console.log('search', query);
},
onClear: function (event) {
console.log('clear');
},
onEnable: function (event) {
console.log('enable');
},
onDisable: function (event) {
console.log('disable');
},
}
}
</script>Search Bar Vue component has additional slots for custom elements:
<f7-searchbar
cancel-link="Cancel"
placeholder="Search in items"
:clear-button="true"
>
<div slot="before-input">Before Input</div>
<div slot="after-input">After Input</div>
</f7-searchbar>Renders to:
<form class="searchbar">
<div class="searchbar-input">
<div>Before Input</div>
<input type="search" placeholder="Search in items">
<div>After Input</div>
<a href="#" class="searchbar-clear"></a>
</div>
<div class="searchbar-cancel">Cancel</div>
</form>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 |
|---|---|---|---|
| form | boolean | true | Main search bar element will be used as a form tag instead of div |
| placeholder | string | "Search" | Input placeholder text |
| cancel-link | string | Cancel link text. Affects only iOS theme | |
| clear-button | boolean | true | Enables "clear" input button |
| init | boolean | true | Initializes Search Bar |
| params | Object | Object with Search Bar API parameters | |
params separate props |
|||
| searchList | string/object | CSS selector or HTML element of list block to search | |
| searchIn | 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' |
| found | string/object | CSS selector or HTMLElement of searchbar "found" element. If not specified, searchbar will look for .searchbar-found element on page |
|
| notFoud | string/object | CSS selector or HTMLElement of searchbar "not-found" element. If not specified, searchbar will look for .searchbar-not-found element on page |
|
| overlay | string/object | CSS selector or HTMLElement of searchbar overlay. If not specified, searchbar will look for .searchbar-overlay element on page |
|
| ignore | string | '.searchbar-ignore' | CSS selector for items to be ignored by searchbar and always present in search results |
| customSearch | boolean | false | When enabled searchbar will not search through any of list blocks specified by `searchList` and you will be able to use custom search functionality, for example, for calling external APIs with search results and for displaying them manually |
| removeDiacritics | boolean | false | Enable to remove/replace diacritics (á, í, ó, etc.) during search |
| hideDividers | 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 |
| hideGroups | 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 | Disable shadow rendering for Material theme | |
| .empty() | Clear search query and update results |
| .search(query) | Force searchbar to search passed query |
| .enable() | Enable/activate searchbar |
| .disable() | Disable/deactivate searchbar |
| Event | Description |
|---|---|
| searchbar:search | Event will be triggered during search (search field change). Event detail contains search query (e.detail.query) and array of found HTML elements (e.detail.foundItems) |
| searchbar:clear | Event will be triggered when user clicks on Search Bar's "clear" element (a href="#" class="searchbar-clear") |
| searchbar:enable | Event will be triggered when Search Bar becomes active |
| searchbar:disable | Event will be triggered when Search Bar becomes inactive - when user clicks on "Cancel" button (a href="searchbar-cancel") or on "searchbar-overlay" element |
| change | Event will be triggered when "change" event occurs on search bar input element |
| input | Event will be triggered when "input" event occurs on search bar input element |
| focus | Event will be triggered when "focus" event occurs on search bar input element |
| blur | Event will be triggered when "blur" event occurs on search bar input element |
| click:clear | Event will be triggered when user clicks on input "clear" button |
| click:cancel | Event will be triggered when user clicks on "cancel" link |
If you use automatic initalization to init Search Bar (with init:true prop) and need to use its Methods and Properties you can access its initialized instance by accessing .f7Searchbar component's property.