サーチバー

サーチバーは、リストビューの要素を使った検索を可能にします。また、カスタム検索機能のビジュアルUIコンポーネントとしても使用できます。

サーチバーのレイアウト

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

構造

<div class="searchbar-input-wrap"> - 検索フィールドとクリアボタンのラッパーです。
- <input type="search" /> - 検索フィールド
- <i class="searchbar-icon"> - 検索アイコンです。
- <span class="input-clear-button"> - フィールドの値をクリアして、検索結果をリセットするボタンです。オプション要素
<span class="searchbar-disable-button"> - サーチバーの「キャンセル」ボタンで、サーチバーを無効にし、検索結果をリセットし、検索フィールドをクリアします。オプション要素
<div class="searchbar-backdrop"> - 半透明のサーチバーの背景で、サーチバーを有効にすると表示されます。この要素は、スクロール可能なページの page-content 内に配置することが推奨されます。

サーチバーの種類

では、ページ構造のどこにサーチバーを配置するかを見てみましょう。いくつかのオプションがあります。

固定検索バー

固定検索バーは、ページのスクロールに依存せず、常に画面上に表示されます。この場合、次のルールのいずれかに従って配置する必要があります。

ページの直接の子とすることもできますが、ページに固定のナビバーやツールバーがある場合は、ナビバーやツールバーの後に配置しなければなりません。

<div class="page">
  <div class="navbar">...</div>
  <div class="toolbar toolbar-bottom">...</div>
  <!-- サーチバーはナビバーとツールバーの後に配置する -->
  <form class="searchbar">...</form>
  <div class="page-content">
    <!-- サーチバーの背景レイヤー -->
    <div class="searchbar-backdrop"></div>
    <!-- ページの内容をここに -->
  </div>
</div>

検索バーはナビバーの内側にあるサブナビバーの内側に配置することができます（推奨方法）。

<div class="page page-with-subnavbar">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      ...
      <div class="subnavbar">
        <!-- サーチバーをサブナビバーの中に入れる -->
        <form class="searchbar">...</form>
      </div>
    </div>
  </div>
  <div class="page-content">
    <!-- サーチバーの背景レイヤー -->
    <div class="searchbar-backdrop"></div>
    <!-- ページ内容はこちら -->
  </div>
</div>

静的検索バー

このケースでは、検索バーはスクロール可能なページコンテンツの一部に過ぎません。

<div class="page">
  <div class="navbar">...</div>
  <div class="page-content">
    <!-- 検索バーの背景レイヤー -->
    <div class="searchbar-backdrop"></div>
    <!-- サーチバーはスクロール可能なページコンテンツの一部 -->
    <form class="searchbar">...</form>
    <!-- ここのページコンテンツ -->
  </div>
</div>

拡張可能な検索バー

拡張可能な検索バーは、無効にすると非表示になり、有効にすると表示されるようになります。そのレイアウトはかなり厳密で、ナビバーの内側に配置されなければなりません。

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="left">...</div>
      <div class="title">...</div>
      <div class="right">
        <!-- サーチバーを有効にするためのリンク -->
        <a class="link icon-only searchbar-enable" data-searchbar=".searchbar">
          <i class="icon f7-icons if-not-md">search</i>
          <i class="icon material-icons md-only">search</i>
        </a>
      </div>
      <!-- 検索バーは、"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>
  <!-- スクロール可能なページコンテンツ -->
  <div class="page-content">...</div>
</div>

構造

<a class="link icon-only searchbar-enable" data-searchbar=".searchbar"> - サーチバーを有効/拡張するためのリンクです。オプションで、他の場所に置くこともできます。data-searchbar` 属性には、有効にするサーチバーの CSS セレクタが含まれます。
サーチバーには、追加の searchbar-expandable クラスがあります。これは拡張可能なサーチバーが動作するために必要です。

インラインサーチバー

インラインサーチバーは、他のコンポーネントの中、特にAppbarの中で使用されるように設計されています。Inline Searchbarは、.searchbar-innerのないシンプルなレイアウトになっており、disableボタンなしで使用することが推奨されます。

インラインにするには、Searchbarに searchbar-inline クラスを追加する必要があります。

<!-- 追加の "searchbar-inline "クラス -->
<div class="searchbar searchbar-inline">
  <div class="searchbar-input-wrap">
    <input type="search" placeholder="Search" />
    <i class="searchbar-icon"></i>
    <span class="input-clear-button"></span>
  </div>
</div>

サーチバーの動作クラス

また、Searchbarがアクティブになったときの動作を定義するために、要素に追加できるCSSクラスがいくつかあります。

searchbar-hide-on-enable - このクラスがページ上にある要素は、サーチバーが有効になったときに非表示になります。
searchbar-hide-on-search - ページ上でこのクラスを持つ要素は、検索時に隠されます。
searchbar-not-found - このクラスを持つ要素は、デフォルトでは非表示で、検索結果が出ないときに表示されます。
searchbar-found - このクラスを持つ要素は、デフォルトでは表示されていて、検索結果が出ないと非表示になります。
searchbar-ignore - サーチバーはこの要素を検索結果に含めません。

例：

<div class="page">
  <div class="navbar">...</div>
  <div class="page-content">
    <div class="searchbar-backdrop"></div>
    <form class="searchbar">...</form>

    <!-- 以下のブロックのタイトルとブロックは、検索では非表示になります。 -->
    <div class="block-title searchbar-hide-on-search">Some block title</div>
    <div class="block">Lorem ipsum dolor sit amet...</div>

    <!-- スーパーヒーローのリストで検索するので、次のタイトルとリストは検索時に表示されなければなりません。 -->
    <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>

    <!-- このリストは、検索結果がないときに表示されます。 -->
    <div class="list simple-list searchbar-not-found">
      <ul>
        <li>Nothing found</li>
      </ul>
    </div>
  </div>
</div>

サーチバーアプリのメソッド

さて、Searchbar' HTMLができたら、初期化する必要があります。関連するアプリのメソッドを使用する必要があります。

app.searchbar.create(parameters)	パラメータによるサーチバーの初期化 parameters - object - Searchbarのパラメータを持つオブジェクト。メソッドは初期化されたSearchbarインスタンスを返す
app.searchbar.destroy(el)	Searchbarインスタンスの破棄 el - HTMLElementまたはstring（CSSセレクタを使用）またはobject。破壊するSearchbar要素またはSearchbarインスタンス。
app.searchbar.get(el)	HTML要素による検索バーインスタンスの取得 el - HTMLElement または string (CSS Selectorを使用). Searchbarの要素です。メソッドは、サーチバーのインスタンスを返します。
app.searchbar.clear(el)	サーチバーテキスト入力のクリア el - HTMLElement または string (CSS Selectorを使用)。Searchbarの要素です。メソッドはサーチバーのインスタンスを返す
app.searchbar.enable(el)	サーチバーの有効化 el - HTMLElement または string (CSSセレクタ付き). サーチバーの要素です。メソッドはサーチバーのインスタンスを返す
app.searchbar.disable(el)	サーチバーの無効化 el - HTMLElement または string (CSSセレクタを使用)。Searchbarの要素です。メソッドはサーチバーのインスタンスを返します。
app.searchbar.toggle(el)	サーチバーの切り替え：無効の場合は有効に、有効の場合は無効にします。 el - HTMLElement または string (CSS Selector使用時). Searchbarの要素です。メソッドはサーチバーのインスタンスを返します
app.searchbar.search(el, query)	サーチバーが `query` を検索するトリガー el - HTMLElement または string (CSS Selector と共に). サーチバーの要素 query - string。検索クエリ。メソッドはサーチバーのインスタンスを返します。

サーチバーのパラメータ

Searchbarの作成・起動に必要な、利用可能なパラメータの一覧を見てみましょう。

Parameter	Type	Default	Description
el	string HTMLElement		サーチバー要素（`form class="searchbar"`）のCSSセレクタまたはHTML要素
inputEl	string HTMLElement		searchbar input要素のCSSセレクタまたはHTML要素。デフォルトでは（渡されなければ）、サーチバーの中で `input type="search"` を探そうとします。
disableButton	boolean	true	無効化ボタンを有効にする
disableButtonEl	string HTMLElement		searchbarのdisableボタンのCSSセレクタまたはHTML要素です。デフォルトでは（パスされなければ）、searchbarの中で、`search-disable-button`クラスを持つ要素を探そうとします。
searchContainer	string HTMLElement		検索対象となるリストブロックのCSSセレクタまたはHTML要素
searchIn	string		検索対象となるリストビュー要素のフィールドのCSSセレクタ。通常は要素のタイトルで検索しますが、この場合は `.item-title` を渡す必要があります。また、`.item-title`や`.item-text`のように、いくつかの要素を渡して検索することも可能です。
searchItem	string	li	単一の検索項目のCSSセレクタ。リストビューで検索を行う場合は、単一のリスト要素でなければなりません `li`
searchGroup	string	.list-group	グループ要素のCSSセレクタです。hideGroups`が有効な場合に、グループを隠すために使用されます。リストビューで検索を行う場合には、通常はリストグループになります。
searchGroupTitle	string	.list-group-title, .item-divider	グループのタイトルとディバイダのCSSセレクタです。hideDividers`が有効な場合に、グループのタイトルとディバイダーを隠すために使用されます。リストビューで検索を行うと、通常はリストグループのタイトルやリストアイテムのディバイダーが表示されます。
foundEl	string HTMLElement	.searchbar-found	検索結果がないときに検索バーの "found "要素を非表示にするためのCSSセレクタまたはHTMLElement。
notFoundEl	string HTMLElement	.searchbar-not-found	検索結果がないときに表示するための searchbar "not-found "要素の CSS セレクタまたは HTML 要素
hideOnEnableEl	string HTMLElement	.searchbar-hide-on-enable	検索バーが有効なときに非表示にする要素の CSS セレクタまたは HTML 要素
hideOnSearchEl	string HTMLElement	.searchbar-hide-on-search	検索バー検索時に非表示にする要素の CSS セレクタまたは HTML 要素
backdrop	boolean		検索バーの背景要素を有効にします。デフォルトでは、オーロラテーマやインラインサーチバーでは無効です
backdropEl	string HTMLElement		検索バーの背景要素の CSS セレクタまたは HTML 要素を指定します。もしも`backdrop`パラメータが`true`で渡されなかった場合、`.searchbar-backdrop`要素を探します。見つからない場合には、自動的に作成されます。
ignore	string	.searchbar-ignore	searchbarが無視し、検索結果に常に表示されるアイテムのためのCSSセレクタです。
customSearch	boolean	false	この機能を有効にすると、サーチバーは `searchContainer` で指定されたリストブロックを検索しないので、カスタム検索機能を使用することができます。
removeDiacritics	boolean	false	検索時に発音記号(á, í, óなど)の削除/置換を有効にする
hideDividers	boolean	true	有効にすると、検索はアイテムの仕切りとグループのタイトルを考慮し、その直後に見つかったアイテムがない場合はそれらを非表示にする
hideGroups	boolean	true	有効にすると、検索はリストビューのグループを考慮し、これらのグループ内に発見されたアイテムがない場合、それらを隠します。
on	object		イベントハンドラーを持つオブジェクト。例えば、以下のようになります。 `var searchbar = app.searchbar.create({ el: '.searchbar', on: { enable: function () { console.log('Searchbar enabled') } } })`

サーチバーのメソッドとプロパティ

サーチバーを作成するには、以下のメソッドを呼び出す必要があります。

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

Searchbarを初期化すると、初期化されたインスタンスが変数（上記の例ではsearchbar変数）に格納され、便利なメソッドやプロパティを持ちます。

Properties
searchbar.params	初期化パラメータが渡されたオブジェクト
searchbar.query	現在の検索クエリ(検索入力値)
searchbar.previousQuery	前の検索クエリ (検索入力値)
searchbar.searchContainer	サーチバー検索コンテナ
searchbar.$searchContainer	サーチバー検索コンテナを持つDom7要素
searchbar.el	サーチバー HTML 要素。
searchbar.$el	検索バー付きHTML要素を持つDom7要素
searchbar.inputEl	サーチバー入力HTML要素
searchbar.$inputEl	サーチバー入力HTML要素を持つDom7の要素
searchbar.enabled	サーチバーが有効か無効かを表すブール値
searchbar.expandable	サーチバーが拡張可能か否かを表すブール値
Methods
searchbar.search(query);	サーチバーに渡されたクエリを強制的に検索させる
searchbar.enable();	サーチバーの有効化/有効化
searchbar.disable();	サーチバーを無効にする/しない
searchbar.toggle();	サーチバーのトグル
searchbar.clear();	検索クエリのクリアと結果の更新
searchbar.destroy();	サーチバー・インスタンスの破棄
searchbar.on(event, handler)	イベントハンドラの追加
searchbar.once(event, handler)	発生後に削除されるイベントハンドラの追加
searchbar.off(event, handler)	イベント・ハンドラの削除
searchbar.off(event)	指定されたイベントのハンドラをすべて削除する
searchbar.emit(event, ...args)	インスタンスでのイベント発生

検索バーのイベント

サーチバーは、以下のDOMイベントをサーチバーエレメントに、イベントをアプリとサーチバーインスタンスに発行します。

DOMイベント

Event	Target	Description
searchbar:search	Searchbar Element<form class="searchbar">	イベントは検索中(検索フィールドの変更)に発生します。イベントの詳細 (`e.detail`) には、`query` と `previousQuery` プロパティを持つオブジェクトが含まれます。
searchbar:clear	Searchbar Element<form class="searchbar">	イベントは、ユーザーがサーチバーの "clear" 要素 (a href="#" class="searchbar-clear") をクリックすると発生します。イベントの詳細(e.detail)には、前回(クリア前)の検索クエリが含まれます。
searchbar:enable	Searchbar Element<form class="searchbar">	サーチバーが有効になるとイベントが発生する
searchbar:disable	Searchbar Element<form class="searchbar">	イベントはサーチバーが無効／非アクティブになったときに発生します。ユーザーが「キャンセル」ボタン（a href="searchbar-cancel"）または "searchbar-overlay "要素をクリックしたときに発生します。
searchbar:beforedestroy	Searchbar Element<form class="searchbar">	イベントは、Searchbarインスタンスが破棄される直前に発生します。

アプリとSearchbarインスタンスのイベント

Searchbarインスタンスは、selfインスタンスとappインスタンスの両方でイベントを発行します。アプリインスタンスのイベントは同じ名前でプレフィックスとして searchbar が付きます。

Event	Target	Arguments	Description
search	searchbar	(searchbar, query, previousQuery)	イベントは検索中(検索フィールドの変更)にトリガーされます。イベントハンドラは引数として、サーチバーインスタンス、現在のクエリ、前のクエリを受け取ります。
searchbarSearch	app	(searchbar, query, previousQuery)
clear	searchbar	(searchbar, previousQuery)	イベントはユーザーがサーチバーの "clear "要素をクリックした時に発生します。イベント・ハンドラは引数として、サーチバーのインスタンスと前（クリア前）のクエリを受け取ります。
searchbarClear	app	(searchbar, previousQuery)
enable	searchbar	(searchbar)	イベントは、サーチバーがアクティブ/有効になったときにトリガされます。イベントハンドラーは引数としてサーチバーのインスタンスを受け取ります。
searchbarEnable	app	(searchbar)
disable	searchbar	(searchbar)	サーチバーが非アクティブ/無効になるとイベントが発生します。イベントハンドラが searchbar インスタンスを受け取る引数として
searchbarDisable	app	(searchbar)
beforeDestroy	searchbar	(searchbar)	イベントはSearchbarインスタンスが破壊される直前にトリガされます。
searchbarBeforeDestroy	app	(searchbar)	イベントはSearchbarインスタンスが破壊される直前にトリガされます。

サーチバーの自動初期化

Searchbar APIを使用する必要がなく、サーチバーがページ内にあり、ページの初期化時にDOMに表示される場合は、searchbar要素に追加の searchbar-init クラスを追加するだけで自動初期化することができ、すべての必要なパラメータは data- 属性を使用して渡すことができます。

<div class="page">
  <div class="navbar">...</div>
  <div class="page-content">
    <div class="searchbar-backdrop"></div>

    <!-- searchbar-init "クラスで自動初期化し、data-属性でsearchContainer, searchInパラメータを渡すサーチバー  -->
    <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>

キャメルケースで使われるパラメータ、例えばsearchContainerはdata-属性ではdata-search-containerのようにケバブケースで使われます。

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

Note that commented variables are not specified by default and their values is what they fallback to in this case.

:root {
  /*
  --f7-searchbar-link-color: var(--f7-bars-link-color);
  --f7-searchbar-inline-input-font-size: var(--f7-searchbar-input-font-size);
  */
  --f7-searchbar-input-border-width: 0px;
  --f7-searchbar-input-border-color: transparent;
  --f7-searchbar-input-text-color: #000;
  --f7-searchbar-placeholder-color: rgba(0, 0, 0, 0.4);
}
:root .theme-dark,
:root.theme-dark {
  --f7-searchbar-input-text-color: #fff;
  --f7-searchbar-placeholder-color: rgba(255, 255, 255, 0.4);
}
.ios {
  /*
  --f7-searchbar-bg-image: var(--f7-bars-bg-image);
  --f7-searchbar-bg-color: var(--f7-bars-bg-color);
  --f7-searchbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  --f7-searchbar-border-color: var(--f7-bars-border-color);
  */
  --f7-searchbar-height: 44px;
  --f7-searchbar-inner-padding-left: 8px;
  --f7-searchbar-inner-padding-right: 8px;
  /*
  --f7-searchbar-link-color: var(--f7-bars-link-color, var(--f7-theme-color));
  */
  --f7-searchbar-input-font-size: 17px;
  --f7-searchbar-input-border-radius: 8px;
  --f7-searchbar-input-height: 32px;
  --f7-searchbar-inline-input-height: 32px;
  /*
  --f7-searchbar-inline-input-border-radius: var(--f7-searchbar-input-border-radius);
  */
  --f7-searchbar-input-padding-horizontal: 28px;
  /*
  --f7-searchbar-inline-input-padding-horizontal: var(--f7-searchbar-input-padding-horizontal);
  --f7-searchbar-input-clear-button-color: var(--f7-input-clear-button-color);
  */
  --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.4);
  --f7-searchbar-shadow-image: none;
  --f7-searchbar-in-page-content-margin: 0px;
  --f7-searchbar-in-page-content-box-shadow: none;
  --f7-searchbar-in-page-content-border-radius: 0;
  --f7-searchbar-in-page-content-input-border-radius: 0;
  --f7-searchbar-search-icon-color: rgba(0, 0, 0, 0.4);
  --f7-searchbar-input-bg-color: #e4e4e4;
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-searchbar-search-icon-color: rgba(255, 255, 255, 0.4);
  --f7-searchbar-input-bg-color: #2a2a2a;
}
.md {
  --f7-searchbar-border-color: transparent;
  --f7-searchbar-height: 48px;
  --f7-searchbar-inner-padding-left: 0px;
  --f7-searchbar-inner-padding-right: 0px;
  --f7-searchbar-link-color: #737373;
  --f7-searchbar-search-icon-color: #737373;
  --f7-searchbar-input-font-size: 20px;
  --f7-searchbar-input-border-radius: 0px;
  --f7-searchbar-input-height: 100%;
  --f7-searchbar-inline-input-height: 32px;
  --f7-searchbar-inline-input-border-radius: 4px;
  --f7-searchbar-input-padding-horizontal: 48px;
  --f7-searchbar-inline-input-padding-horizontal: 24px;
  --f7-searchbar-input-clear-button-color: #737373;
  --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.25);
  --f7-searchbar-shadow-image: var(--f7-bars-shadow-bottom-image);
  --f7-searchbar-in-page-content-margin: 8px;
  --f7-searchbar-in-page-content-box-shadow: var(--f7-elevation-1);
  --f7-searchbar-in-page-content-border-radius: 4px;
  --f7-searchbar-in-page-content-input-border-radius: 4px;
  --f7-searchbar-bg-color: #fff;
  --f7-searchbar-input-bg-color: #fff;
}
.md .theme-dark,
.md.theme-dark {
  --f7-searchbar-bg-color: #202020;
  --f7-searchbar-input-bg-color: #202020;
}
.aurora {
  /*
  --f7-searchbar-bg-image: var(--f7-bars-bg-image);
  --f7-searchbar-bg-color: var(--f7-bars-bg-color);
  --f7-searchbar-border-color: var(--f7-bars-border-color);
  */
  --f7-searchbar-height: 56px;
  --f7-searchbar-inner-padding-left: 16px;
  --f7-searchbar-inner-padding-right: 16px;
  /*
  --f7-searchbar-link-color: var(--f7-bars-link-color, var(--f7-theme-color));
  */
  --f7-searchbar-input-font-size: 16px;
  --f7-searchbar-input-border-radius: 8px;
  --f7-searchbar-input-height: 38px;
  --f7-searchbar-inline-input-height: 38px;
  /*
  --f7-searchbar-inline-input-border-radius: var(--f7-searchbar-input-border-radius);
  */
  --f7-searchbar-input-padding-horizontal: 34px;
  /*
  --f7-searchbar-inline-input-padding-horizontal: var(--f7-searchbar-input-padding-horizontal;
  --f7-searchbar-input-clear-button-color: var(--f7-input-clear-button-color);
  */
  --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.4);
  --f7-searchbar-shadow-image: none;
  --f7-searchbar-in-page-content-margin: 0px;
  --f7-searchbar-in-page-content-box-shadow: none;
  --f7-searchbar-in-page-content-border-radius: 0;
  /*
  --f7-searchbar-in-page-content-input-border-radius: var(--f7-searchbar-input-border-radius);
  */
  --f7-searchbar-search-icon-color: rgba(0, 0, 0, 0.4);
  --f7-searchbar-input-bg-color: #e4e4e4;
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-searchbar-search-icon-color: rgba(255, 255, 255, 0.4);
  --f7-searchbar-input-bg-color: #2a2a2a;
}

Example

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Search Bar</div>
        <div class="subnavbar">
          <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 if-not-aurora">Cancel</span>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="page-content">
      <div class="searchbar-backdrop"></div>
      <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>
      <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">Cadillac</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Chevrolet</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Chrysler</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Dodge</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Ferrari</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Ford</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">GMC</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Honda</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Hummer</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Hyundai</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Infiniti</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Isuzu</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Jaguar</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Jeep</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Kia</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Lamborghini</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Land Rover</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Lexus</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Lincoln</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Lotus</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Mazda</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Mercedes-Benz</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Mercury</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Mitsubishi</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Nissan</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Oldsmobile</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Peugeot</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Pontiac</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Porsche</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Regal</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Saab</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Saturn</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Subaru</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Suzuki</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Toyota</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Volkswagen</div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Volvo</div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block searchbar-not-found">
        <div class="block-inner">Nothing found</div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $f7, $on }) => {
    $on('pageInit', () => {
      // create searchbar
      var searchbar = $f7.searchbar.create({
        el: '.searchbar',
        searchContainer: '.list',
        searchIn: '.item-title',
        on: {
          search(sb, query, previousQuery) {
            console.log(query, previousQuery);
          }
        }
      });
    })

    return $render;
  }
</script>