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