スポンサー
Support Framework7

サーチバー

    サーチバーは、リストビューの要素を使った検索を可能にします。また、カスタム検索機能のビジュアル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の作成・起動に必要な、利用可能なパラメータの一覧を見てみましょう。

    ParameterTypeDefaultDescription
    elstring
    HTMLElement
    サーチバー要素(form class="searchbar")のCSSセレクタまたはHTML要素
    inputElstring
    HTMLElement
    searchbar input要素のCSSセレクタまたはHTML要素。デフォルトでは(渡されなければ)、サーチバーの中で input type="search" を探そうとします。
    disableButtonbooleantrue無効化ボタンを有効にする
    disableButtonElstring
    HTMLElement
    searchbarのdisableボタンのCSSセレクタまたはHTML要素です。デフォルトでは(パスされなければ)、searchbarの中で、search-disable-buttonクラスを持つ要素を探そうとします。
    searchContainerstring
    HTMLElement
    検索対象となるリストブロックのCSSセレクタまたはHTML要素
    searchInstring検索対象となるリストビュー要素のフィールドのCSSセレクタ。通常は要素のタイトルで検索しますが、この場合は .item-title を渡す必要があります。また、.item-title.item-textのように、いくつかの要素を渡して検索することも可能です。
    searchItemstringli単一の検索項目のCSSセレクタ。リストビューで検索を行う場合は、単一のリスト要素でなければなりません li
    searchGroupstring.list-groupグループ要素のCSSセレクタです。hideGroups`が有効な場合に、グループを隠すために使用されます。リストビューで検索を行う場合には、通常はリストグループになります。
    searchGroupTitlestring.list-group-title, .item-dividerグループのタイトルとディバイダのCSSセレクタです。hideDividers`が有効な場合に、グループのタイトルとディバイダーを隠すために使用されます。リストビューで検索を行うと、通常はリストグループのタイトルやリストアイテムのディバイダーが表示されます。
    foundElstring
    HTMLElement
    .searchbar-found検索結果がないときに検索バーの "found "要素を非表示にするためのCSSセレクタまたはHTMLElement。
    notFoundElstring
    HTMLElement
    .searchbar-not-found検索結果がないときに表示するための searchbar "not-found "要素の CSS セレクタまたは HTML 要素
    hideOnEnableElstring
    HTMLElement
    .searchbar-hide-on-enable検索バーが有効なときに非表示にする要素の CSS セレクタまたは HTML 要素
    hideOnSearchElstring
    HTMLElement
    .searchbar-hide-on-search検索バー検索時に非表示にする要素の CSS セレクタまたは HTML 要素
    backdropboolean検索バーの背景要素を有効にします。デフォルトでは、オーロラテーマやインラインサーチバーでは無効です
    backdropElstring
    HTMLElement
    検索バーの背景要素の CSS セレクタまたは HTML 要素を指定します。もしもbackdropパラメータがtrueで渡されなかった場合、.searchbar-backdrop要素を探します。見つからない場合には、自動的に作成されます。
    ignorestring.searchbar-ignoresearchbarが無視し、検索結果に常に表示されるアイテムのためのCSSセレクタです。
    customSearchbooleanfalseこの機能を有効にすると、サーチバーは searchContainer で指定されたリストブロックを検索しないので、カスタム検索機能を使用することができます。
    removeDiacriticsbooleanfalse検索時に発音記号(á, í, óなど)の削除/置換を有効にする
    hideDividersbooleantrue有効にすると、検索はアイテムの仕切りとグループのタイトルを考慮し、その直後に見つかったアイテムがない場合はそれらを非表示にする
    hideGroupsbooleantrue有効にすると、検索はリストビューのグループを考慮し、これらのグループ内に発見されたアイテムがない場合、それらを隠します。
    onobject

    イベントハンドラーを持つオブジェクト。例えば、以下のようになります。

    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イベント

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

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

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

    EventTargetArgumentsDescription
    searchsearchbar(searchbar, query, previousQuery)イベントは検索中(検索フィールドの変更)にトリガーされます。イベントハンドラは引数として、サーチバーインスタンス、現在のクエリ、前のクエリを受け取ります。
    searchbarSearchapp
    clearsearchbar(searchbar, previousQuery)イベントはユーザーがサーチバーの "clear "要素をクリックした時に発生します。イベント・ハンドラは引数として、サーチバーのインスタンスと前(クリア前)のクエリを受け取ります。
    searchbarClearapp
    enablesearchbar(searchbar)イベントは、サーチバーがアクティブ/有効になったときにトリガされます。イベントハンドラーは引数としてサーチバーのインスタンスを受け取ります。
    searchbarEnableapp
    disablesearchbar(searchbar)サーチバーが非アクティブ/無効になるとイベントが発生します。イベントハンドラが searchbar インスタンスを受け取る引数として
    searchbarDisableapp
    beforeDestroysearchbar(searchbar)イベントはSearchbarインスタンスが破壊される直前にトリガされます。
    searchbarBeforeDestroyapp

    サーチバーの自動初期化

    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>