Searchbar

Searchbar allows user to search through List View elements. Or it can be used as a visual UI component for your custom search realization.

Where:

• - wrapper for search field and clear button
  • **<input type="search">** - search field
  • **<i class="searchbar-icon">** - search icon
  • **<span class="input-clear-button">** - button to clear field value and reset search results. Optional element
• **<span class="searchbar-disable-button">** - Searchbar “Cancel” button that will deactivate Searchbar, reset search results and clear search field. Optional element
• **<div class="searchbar-backdrop">** - semi transparent searchbar backdrop that becomes visible when we enable searchbar. It is recommended to place this element inside of scrollable page’s page-content

Searchbar Type

Now let’s see where we can place Searchbar in page structure. There are few options:

Fixed Searchbar is always visible on screen not depending on page scroll. In this case it must be placed according to one of the following rules:

• It can be a direct child of page and if page has also fixed Navbar and/or Toolbar then it must be AFTER Navbar and Toolbar:

  <div class="page">
    <div class="navbar">...</div>
    <div class="toolbar">...</div>
    <!-- Searchbar goes after Navbar and Toolbar -->
    <form class="searchbar">...</form>
    <div class="page-content">
      <!-- Searchbar backdrop layer -->
      <div class="searchbar-backdrop"></div>
      <!-- page content here -->
    </div>
  </div>

• <div class="page page-with-subnavbar">
    <div class="navbar">
      <div class="navbar-inner">
        ...
        <div class="subnavbar">
          <!-- Searchbar inside of Subnavbar -->
          <form class="searchbar">...</form>
        </div>
      </div>
    </div>
    <div class="page-content">
      <!-- Searchbar backdrop layer -->
      <div class="searchbar-backdrop"></div>
      <!-- page content here -->
    </div>
  </div>

In this case Searchbar is just part of the scrollable page content:

Expandable Searchbar is hidden when disabled and becomes visible when we enable it. Its layout is pretty strict, it must be placed inside of Navbar:

<div class="page">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left">...</div>
      <div class="title">...</div>
        <!-- Link to enable searchbar -->
        <a class="link icon-only searchbar-enable" data-searchbar=".searchbar">
          <i class="icon f7-icons ios-only">search_strong</i>
          <i class="icon material-icons md-only">search</i>
        </a>
      </div>
      <!-- Searchbar is a direct child of "navbar-inner" -->
      <form class="searchbar searchbar-expandable">
        <div class="searchbar-inner">
          <div class="searchbar-input-wrap">
            <i class="searchbar-icon"></i>
            <span class="input-clear-button"></span>
          </div>
          <span class="searchbar-disable-button">Cancel</span>
        </div>
      </form>
    </div>
  </div>
  <!-- Scrollable page content -->
  <div class="page-content">...</div>
</div>

Where:

• **<a class="link icon-only searchbar-enable" data-searchbar=".searchbar">** - link to enable/expand Searchbar. Optional or can be placed in any other place. **data-searchbar** attribute contains CSS selector of Searchbar to enable.
• Searchbar has additional **searchbar-expandable** class. It is required for expandable Searchbar to work

There are also several CSS classes that can be added to elements that will define their behavior when Searchbar is active:

• **searchbar-hide-on-enable** - elements with such class on page will be hidden when searchbar is enabled
• **searchbar-hide-on-search** - elements with such class on page will be hidden during search
• **searchbar-not-found** - elements with such class are hidden by default and become visible when there is not any search results
• **searchbar-found** - elements with such class are visible by default and become hidden when there is not any search results
• **searchbar-ignore** - searchbar will not consider this elements in search results

For example:

<div class="page">
  <div class="navbar">...</div>
  <div class="page-content">
    <div class="searchbar-backdrop"></div>
    <form class="searchbar">...</form>
    <!-- Following block title and block will be hidden on search -->
    <div class="block-title searchbar-hide-on-search">Some block title</div>
    <div class="block">Lorem ipsum dolor sit amet...</div>
    <!-- We do search in super heroes list so the following title and list must be visible on search -->
    <div class="block-title searchbar-found">Super Heroes</div>
    <div class="list simple-list searchbar-found">
      <ul>
        <li>Hulk</li>
        <li>Batman</li>
        <li>Superman</li>
        ...
      </ul>
    </div>
    <!-- This list will be visible when there is not any search results -->
    <div class="list simple-list searchbar-not-found">
      <ul>
      </ul>
    </div>
  </div>
</div>

Searchbar App Methods

Let’s look on list of all available parameters we need to create/init Searchbar:

Searchbar Methods & Properties

So to create Popup we have to call:

var searchbar = app.searchbar.create({ /* parameters */ })

After we initialize Searchbar we have its initialized instance in variable (like searchbar variable in example above) with helpful methods and properties:

Searchbar will fire the following DOM events on searchbar element and events on app and searchbar instance:

Searchbar instance emits events on both self instance and app instance. App instance events has same names prefixed with searchbar.

Searchbar Auto Initialization

<div class="page">
  <div class="navbar">...</div>
  <div class="page-content">
    <div class="searchbar-backdrop"></div>
    <!-- Searchbar with "searchbar-init" class for auto initialization and searchContainer, searchIn parameters passed in data- attributes  -->
    <form class="searchbar searchbar-init" data-search-container=".search-here">
      ...
    </form>
    <div class="list simple-list search-list searchbar-found">
      <ul>
        <li>Hulk</li>
        <li>Batman</li>
        <li>Superman</li>
        ...
      </ul>
    </div>
    ...
  </div>
</div>

Parameters that used in camelCase, for example searchContainer, in data- attributes should be used in kebab-case as data-search-container

var app = new Framework7();
// create searchbar
var searchbar = app.searchbar.create({
  el: '.searchbar',
  searchContainer: '.list',
  searchIn: '.item-title',
  on: {
    search(sb, query, previousQuery) {
      console.log(query, previousQuery);
    }