Searchbar React Component
- Searchbar Components
- Searchbar Properties
- Searchbar Methods
- Searchbar Events
- Searchbar Slots
- Access To Searchbar Instance
- Examples
Searchbar React component represents Framework7's Searchbar component.
Searchbar Components
There are following components included:
Searchbar
/F7Searchbar
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 |
---|---|---|---|
<Searchbar> properties | |||
init | boolean | true | Initializes Searchbar |
value | string number | Allows to specify Searchbar input's value. Can be usefule when used with customSearch enabled | |
form | boolean | true | Main searchbar element will be used as a form tag instead of div |
placeholder | string | "Search" | Input placeholder text |
disableButton | boolean | true | Enables disable button |
disableButtonText | string | Cancel | Disable button text |
clearButton | boolean | true | Enables searchbar input clear button |
expandable | boolean | false | Enables expandable searchbar |
inline | boolean | false | Enables inline searchbar |
spellcheck | boolean | Sets spellcheck attribute on input element | |
searchContainer | 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' |
searchItem | 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 |
searchGroup | string | .list-group | CSS selector of group element. Used when hideGroups enabled to hide groups. If we do a search in List View, then it usually a list group. |
searchGroupTitle | string | .list-group-title, .item-divider | CSS selector of group titles and dividers. Used when hideDividers 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. |
foundEl | string object | .searchbar-found | CSS selector or HTMLElement of searchbar "found" element. If not specified, searchbar will look for .searchbar-found element on page |
notFoundEl | 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 | |
backdropEl | 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 |
customSearch | 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 |
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 |
noShadow | boolean | false | Disable shadow rendering for MD theme |
noHairline | boolean | false | Disable searchbar bottom thin border (hairline) for iOS theme |
Searchbar Methods
<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 |
---|---|---|
<Searchbar> events | ||
searchbarSearch | (searchbar, query, previousQuery) | Event will be triggered during search (search field change). As an arguments event receives searchbar instance, search query and previous query |
searchbarClear | (searchbar, previousQuery) | Event will be triggered when user clicks on Searchbar input "clear" button. As an arguments event receives searchbar instance and previous query |
searchbarEnable | (searchbar) | Event will be triggered when Searchbar becomes active |
searchbarDisable | (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 |
clickClear | (event) | Event will be triggered when user clicks on input "clear" button |
clickDisable | (event) | Event will be triggered when user clicks on searchbar disable button |
Searchbar Slots
Searchbar React 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:
<Searchbar
disableButtonText="Cancel"
placeholder="Search in items"
clearButton={true}
></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:
<Searchbar
disableButtonText="Cancel"
placeholder="Search in items"
clearButton={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>
</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
export default () => (
<Page>
<Navbar title="Searchbar">
<Subnavbar inner={false}>
<Searchbar
searchContainer=".search-list"
searchIn=".item-title"
disableButton={!this.$theme.aurora}
></Searchbar>
</Subnavbar>
</Navbar>
<List className="searchbar-not-found">
<ListItem title="Nothing found" />
</List>
<List className="search-list searchbar-found">
<ListItem title="Acura" />
<ListItem title="Audi" />
<ListItem title="BMW" />
<ListItem title="Cadillac " />
<ListItem title="Chevrolet " />
<ListItem title="Chrysler " />
<ListItem title="Dodge " />
<ListItem title="Ferrari " />
<ListItem title="Ford " />
<ListItem title="GMC " />
<ListItem title="Honda" />
<ListItem title="Hummer" />
<ListItem title="Hyundai" />
<ListItem title="Infiniti " />
<ListItem title="Isuzu " />
<ListItem title="Jaguar " />
<ListItem title="Jeep " />
<ListItem title="Kia" />
<ListItem title="Lamborghini " />
<ListItem title="Land Rover" />
<ListItem title="Lexus " />
<ListItem title="Lincoln " />
<ListItem title="Lotus " />
<ListItem title="Mazda" />
<ListItem title="Mercedes-Benz" />
<ListItem title="Mercury " />
<ListItem title="Mitsubishi" />
<ListItem title="Nissan " />
<ListItem title="Oldsmobile " />
<ListItem title="Peugeot " />
<ListItem title="Pontiac " />
<ListItem title="Porsche" />
<ListItem title="Regal" />
<ListItem title="Saab " />
<ListItem title="Saturn " />
<ListItem title="Subaru " />
<ListItem title="Suzuki " />
<ListItem title="Toyota" />
<ListItem title="Volkswagen" />
<ListItem title="Volvo" />
</List>
</Page>
);
Expandable Searchbar
export default () => (
<Page>
<Navbar title="Searchbar">
<NavRight>
<Link searchbarEnable=".searchbar-demo" iconIos="f7:search" iconAurora="f7:search" iconMd="material:search"></Link>
</NavRight>
<Searchbar
className="searchbar-demo"
expandable
searchContainer=".search-list"
searchIn=".item-title"
disableButton={!this.$theme.aurora}
></Searchbar>
</Navbar>
<List className="searchbar-not-found">
<ListItem title="Nothing found" />
</List>
<List className="search-list searchbar-found">
<ListItem title="Acura" />
<ListItem title="Audi" />
<ListItem title="BMW" />
<ListItem title="Cadillac " />
<ListItem title="Chevrolet " />
<ListItem title="Chrysler " />
<ListItem title="Dodge " />
<ListItem title="Ferrari " />
<ListItem title="Ford " />
<ListItem title="GMC " />
<ListItem title="Honda" />
<ListItem title="Hummer" />
<ListItem title="Hyundai" />
<ListItem title="Infiniti " />
<ListItem title="Isuzu " />
<ListItem title="Jaguar " />
<ListItem title="Jeep " />
<ListItem title="Kia" />
<ListItem title="Lamborghini " />
<ListItem title="Land Rover" />
<ListItem title="Lexus " />
<ListItem title="Lincoln " />
<ListItem title="Lotus " />
<ListItem title="Mazda" />
<ListItem title="Mercedes-Benz" />
<ListItem title="Mercury " />
<ListItem title="Mitsubishi" />
<ListItem title="Nissan " />
<ListItem title="Oldsmobile " />
<ListItem title="Peugeot " />
<ListItem title="Pontiac " />
<ListItem title="Porsche" />
<ListItem title="Regal" />
<ListItem title="Saab " />
<ListItem title="Saturn " />
<ListItem title="Subaru " />
<ListItem title="Suzuki " />
<ListItem title="Toyota" />
<ListItem title="Volkswagen" />
<ListItem title="Volvo" />
</List>
</Page>
);