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.

Searchbar Layout

<div class="searchbar-backdrop"></div>
<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>

Where:

• **<div class="searchbar-input-wrap">** - 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

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>

• It can be placed inside of Subnavbar which is inside of the Navbar (recommended way):

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

Static Searchbar

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

<div class="page">
  <div class="navbar">...</div>
  <div class="page-content">
    <!-- Searchbar backdrop layer -->
    <div class="searchbar-backdrop"></div>
    <!-- Searchbar is part of scrollable page content -->
    <form class="searchbar">...</form>
    <!-- page content here -->
  </div>
</div>

Expandable Searchbar

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>
      <div class="right">
        <!-- 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">
            <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>
    </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

Searchbar Behavior Classes

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>
        <li>Nothing found</li>
      </ul>
    </div>
  </div>
</div>

Searchbar App Methods

Now, when we have Searchbar’ HTML, we need to initialize it. We need to use related App’s method:

Searchbar Parameters

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

var searchbar = app.searchbar.create({
  el: ‘.searchbar’,
  on: {
    enable: function () {
      console.log(‘Searchbar enabled’)
    }
  }
})

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 Events

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

DOM Events

App and Searchbar Instance Events

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

Searchbar Auto Initialization

If you don’t need to use Searchbar API and your Searchbar is inside of the page and presented in DOM on moment of page initialization then it can be auto initialized with just adding additional **searchbar-init** class to searchbar element, and all required parameters can be passed using **data-** attributes:

<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

<div class="page">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="title">Search Bar</div>
      <div class="subnavbar">
        <!-- Searchbar with auto init -->
        <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>
      </div>
    </div>
  </div>
  <div class="page-content">
    <!-- Searchbar backdrop -->
    <div class="searchbar-backdrop"></div>
    <!-- hide-on-search element -->
    <div class="block searchbar-hide-on-search">
      <p>This block will be hidden on search. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <!-- search target list -->
    <div class="list searchbar-found">
      <ul>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Acura</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Audi</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">BMW</div>
          </div>
        </li>
        ...
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title">Volvo</div>
          </div>
        </li>
      </ul>
    </div>
    <!-- Nothing found message -->
    <div class="block searchbar-not-found">
      <div class="block-inner">Nothing found</div>
    </div>
  </div>
</div>

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