Search Bar React Component

Search Bar React component represents Framework7's Search Bar component.

Usage example

<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>
  );
};

Slot Properties

Search Bar React component has additional slots for custom elements:

• beforeInputSlot - element will be inserted right before <input type="search"> element
• afterInputSlot - element will be inserted right after <input type="search"> element

<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>

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
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 Properties

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