搜索栏

搜索栏允许用户在列表元素中搜索，或者它可以用来作为UI组件，放到你自己的搜索实现中。

搜索栏布局

搜索栏应该放到“.page”内，“.page-content”前：

<div class="page">
    <!-- Search bar -->
    <form class="searchbar">
        <div class="searchbar-input">
  <input type="search" placeholder="Search">
  <a href="#" class="searchbar-clear"></a>
        </div>
        <a href="#" class="searchbar-cancel">Cancel</a>
    </form>
    
    <!-- Search bar overlay-->
    <div class="searchbar-overlay"></div>
    
    <!-- Page content -->
    <div class="page-content">
        <div class="content-block searchbar-not-found">
      Nothing found
        </div>
 
        <div class="list-block list-block-search searchbar-found">
  <ul>
      ... list view items ...
  </ul>
        </div>
    </div>
</div>

其中：

• form class="searchbar" - 主要的搜索栏容器。它不必是个form元素，但推荐如此。
  • div class="searchbar-input" - 搜索区域和取消按钮的容器
    • input type="search" - search field
    • a class="searchbar-clear" - button to clear field value and reset search results. Optional element
  • a class="searchbar-cancel" - searchbar Cancel button that will deactivate searchbar, reset search results and clear search field. Optional element
• div class="searchbar-overlay" - Add this element right after search bar to enable dark overlay over page content when search bar is active. Optional element.
• "list-block-search" - list block where we are going to search elements.
• "searchbar-found" - element with this class will be displayed if searchbar find elements that match to search query. Visible by default. Optional element.
• "searchbar-not-found" - element with this class will be displayed if searchbar doesn't find elements that match to search query. Hidden by default. Optional element.

Initialize Searchbar with JavaScript

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

myApp.searchbar(searchbarContainer, parameters) - initialize searchbar with options

• searchbarContainer - HTMLElement or string (with CSS Selector) of Searchbar container HTML element. Required.
• parameters - object - object with Searchbar parameters. Optional.
• Method returns initialized Searchbar instance

For example:

var mySearchbar = app.searchbar('.searchbar', {
    searchList: '.list-block-search',
    searchIn: '.item-title'
});   

Searchbar Parameters

Let's look on list of all available parameters:

Searchbar Methods & Properties

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

Initialize Searchbar with HTML

If you don't need to use Searchbar methods and properties you can initialize it using HTML without JavaScript. You can do that just by adding additional "searchbar-init" class to .searchbar. In this case we may pass required parameters using data- attributes.

<div class="page">
    <!-- Search bar with "searchbar-init" class for auto initialization -->
    <form class="searchbar searchbar-init" data-search-list=".list-block-search" data-search-in=".item-title" data-found=".searchbar-found" data-not-found=".searchbar-not-found">
        <div class="searchbar-input">
  <input type="search" placeholder="Search">
  <a href="#" class="searchbar-clear"></a>
        </div>
        <a href="#" class="searchbar-cancel">Cancel</a>
    </form>
    
    <div class="searchbar-overlay"></div>
    
    <div class="page-content">
        <div class="content-block searchbar-not-found">
      Nothing found
        </div>
 
        <div class="list-block list-block-search searchbar-found">
  <ul>
      ... list view items ...
  </ul>
        </div>
    </div>
</div> 

Parameters that used in camelCase, for example searchList, in data- attributes should be used as hypens-case as data-search-list

Access to Searchbar's Instance

If you initialize Searchbar using HTML it is still possible to access to Searchbar's instance. It is "f7Searchbar" property of searchbar's container HTML element:

var mySearchbar = $$('.searchbar')[0].f7Searchbar;
 
// Now you can use it
mySearchbar.search('Hello world');

Search Bar Example

In this example we use searchbar with auto initialization

<div data-page="home" class="page">
  <!-- Search bar -->
  <form data-search-list=".list-block-search" data-search-in=".item-title" class="searchbar searchbar-init">
    <div class="searchbar-input">
      <input type="search" placeholder="Search"><a href="#" class="searchbar-clear"></a>
    </div><a href="#" class="searchbar-cancel">Cancel</a>
  </form>
 
  <!-- Search bar overlay -->
  <div class="searchbar-overlay"></div>
 
  <div class="page-content">
    <!-- This block will be displayed if nothing found -->
    <div class="content-block searchbar-not-found">
      <div class="content-block-inner">Nothing found</div>
    </div>
 
    <!-- This block will be displayed if anything found, and this list block is used a searbar target -->
    <div class="list-block list-block-search 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>
        ...
      </ul>
    </div>
  </div>
</div>          

搜索栏JavaScript事件