Search Bar React component represents Framework7's Search Bar component.
<Searchbar
cancelLink="Cancel"
placeholder="Search in items"
clearButton={true}
/>
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 React component with initialization
const SearchbarPage = () => {
return (
<Page>
<Navbar backLink="Back" title="Searchbar" sliding />
<Searchbar
cancelLink="Cancel"
searchList="#search-list"
onSearchbarSearch={onSearchFunction}
onSearchbarEnable={onEnableFunction}
onSearchbarDisable={onDisableFunction}
onSearchbarClear={onClearFunction}
/>
<List className="searchbar-not-found">
<ListItem title="Nothing found" />
</List>
<List className="searchbar-found" id="search-list">
{
Array.apply(null, Array(100)).map((item, index) => {
return (<ListItem key={index} title={`Item ${index + 1}`} />);
})
}
</List>
</Page>
);
};
Search Bar React component has additional slots for custom elements:
<Searchbar
cancelLink="Cancel"
placeholder="Search in items"
clearButton={true}
beforeInputSlot={<div>Before Input</div>}
afterInputSlot={<div>After Input</div>}
/>
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 |
cancelLink | string | Cancel link text. Affects only iOS theme | |
clearButton | 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 |
Event | Description |
---|---|
onSearchbarSearch | 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) |
onSearchbarClear | Event will be triggered when user clicks on Search Bar's "clear" element (a href="#" class="searchbar-clear") |
onSearchbarEnable | Event will be triggered when Search Bar becomes active |
onSearchbarDisable | Event will be triggered when Search Bar becomes inactive - when user clicks on "Cancel" button (a href="searchbar-cancel") or on "searchbar-overlay" element |
onChange | Event will be triggered when "change" event occurs on search bar input element |
onInput | Event will be triggered when "input" event occurs on search bar input element |
onFocus | Event will be triggered when "focus" event occurs on search bar input element |
onBlur | Event will be triggered when "blur" event occurs on search bar input element |
onClickClear | Event will be triggered when user clicks on input "clear" button |
onClickCancel | Event will be triggered when user clicks on "cancel" link |