検索バー

検索バーを使用すると、ユーザーはリストビュー要素を検索できます。または、カスタム検索の実現のための視覚的な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>
  <!-- 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-bg"></div>
    <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>

静的検索バー

この場合、検索バーはスクロール可能なページコンテンツの一部です。

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

拡張可能な検索バー

拡張可能な検索バーは、無効になっているときは非表示になり、有効にすると表示されます。そのレイアウトは非常に厳密で、ナビゲーションバー内に配置する必要があります。

<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">
        <!-- Link to enable searchbar -->
        <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>
      <!-- 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>

どこ

<a class="link icon-only searchbar-enable" data-searchbar=".searchbar"> - 検索バーを有効/展開するためのリンク。オプションまたは他の任意の場所に配置できます。data-searchbar属性には、有効にする検索バーのCSSセレクターが含まれています。
検索バーには、追加のsearchbar-expandableクラスがあります。拡張可能な検索バーが機能するためには必須です。

インライン検索バー

インライン検索バーは、他のコンポーネント内で使用するように設計されています。簡略化されたレイアウト（.searchbar-innerなし）であり、無効化ボタンなしで使用することをお勧めします。

インラインにするには、検索バーにsearchbar-inlineクラスを追加するだけです。

<!-- Additional "searchbar-inline" class -->
<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>

検索バーの動作クラス

検索バーがアクティブなときに動作を定義する要素に追加できる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>

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

検索バーのアプリメソッド

次に、検索バーのHTMLがある場合は、初期化する必要があります。関連するアプリのメソッドを使用する必要があります。

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

検索バーのパラメーター

検索バーを作成/初期化するために必要な、利用可能なすべてのパラメーターのリストを見てみましょう

パラメーター	型	デフォルト	説明
el	string HTMLElement		検索バー要素 (`form class="searchbar"`) のCSSセレクターまたはHTML要素
inputEl	string HTMLElement		CSSセレクターまたは検索バーの入力要素のHTML要素。デフォルトでは (渡されない場合)、検索バー内の`input type="search"`を検索しようとします。
disableButton	boolean	true	無効化ボタンを有効にします
disableButtonEl	string HTMLElement		CSSセレクターまたは検索バーの無効化ボタンのHTML要素。デフォルトでは (渡されない場合)、検索バー内の`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	グループタイトルのCSSセレクター。`hideGroupTitles`を有効にしてグループタイトルを非表示にする場合に使用します。リストビューで検索する場合は、通常リストグループタイトルです。
foundEl	string HTMLElement	.searchbar-found	検索結果がないときに非表示にする検索バーの「検索結果あり」要素のCSSセレクターまたはHTMLElement
notFoundEl	string HTMLElement	.searchbar-not-found	検索結果がないときに表示する検索バーの「検索結果なし」要素のCSSセレクターまたはHTMLElement
hideOnEnableEl	string HTMLElement	.searchbar-hide-on-enable	検索バーが有効になっているときに非表示にする要素のCSSセレクターまたはHTMLElement
hideOnSearchEl	string HTMLElement	.searchbar-hide-on-search	検索バーの検索で非表示にする要素のCSSセレクターまたはHTMLElement
backdrop	boolean		検索バーの背景要素を有効にします。デフォルトでは、インライン検索バーでは無効になっています
backdropEl	string HTMLElement		検索バーの背景要素のCSSセレクターまたはHTMLElement。渡されず、`backdrop`パラメーターが`true`の場合、`.searchbar-backdrop`要素を検索します。見つからない場合は、自動的に作成します
ignore	string	.searchbar-ignore	検索バーで無視され、常に検索結果に表示される項目のCSSセレクター
customSearch	boolean	false	有効にすると、検索バーは`searchContainer`で指定されたリストブロックを検索せず、カスタム検索機能 (たとえば、検索結果で外部APIを呼び出すためや、手動で表示するためなど) を使用できます。
removeDiacritics	boolean	false	検索中にダイアクリティカルマーク (á, í, ó など) を削除/置換するために有効にします
hideGroupTitles	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.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	検索バーが拡張可能かどうかを表すブール値
メソッド
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 イベント

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

アプリと検索バーのインスタンスのイベント

検索バーのインスタンスは、自身のインスタンスとアプリのインスタンスの両方でイベントを発行します。アプリのインスタンスのイベントには、searchbar がプレフィックスとして付いた同じ名前が付けられます。

イベント	ターゲット	引数	説明
search	searchbar	(searchbar, query, previousQuery)	イベントは検索中（検索フィールドの変更）にトリガーされます。イベントハンドラは、引数として検索バーのインスタンス、現在のクエリ、前のクエリを受け取ります
searchbarSearch	app	(searchbar, query, previousQuery)
clear	searchbar	(searchbar, previousQuery)	ユーザーが検索バーの「クリア」要素をクリックすると、イベントがトリガーされます。イベントハンドラは、引数として検索バーのインスタンスと、（クリア前の）前のクエリを受け取ります
searchbarClear	app	(searchbar, previousQuery)
enable	searchbar	(searchbar)	検索バーがアクティブ/有効になると、イベントがトリガーされます。イベントハンドラは、引数として検索バーのインスタンスを受け取ります
searchbarEnable	app	(searchbar)
disable	searchbar	(searchbar)	検索バーが非アクティブ/無効になると、イベントがトリガーされます。イベントハンドラは、引数として検索バーのインスタンスを受け取ります
searchbarDisable	app	(searchbar)
beforeDestroy	searchbar	(searchbar)	検索バーのインスタンスが破棄される直前に、イベントがトリガーされます
searchbarBeforeDestroy	app	(searchbar)	検索バーのインスタンスが破棄される直前に、イベントがトリガーされます

検索バーの自動初期化

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

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

キャメルケースで使用されるパラメータ（たとえば、searchContainer）は、data-属性ではケバブケース（data-search-container）として使用する必要があります

CSS変数

以下は、関連するCSS変数（CSSカスタムプロパティ）のリストです。

コメントされた変数はデフォルトで指定されておらず、その値は、この場合にフォールバックされる値であることに注意してください。

: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;
}
.ios {
  /*
  --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-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-placeholder-color: rgba(0, 0, 0, 0.4);
  --f7-searchbar-input-text-color: #000;
  --f7-searchbar-search-icon-color: rgba(0, 0, 0, 0.4);
  --f7-searchbar-input-bg-color: #e4e4e4;
}
.ios .dark,
.ios.dark {
  --f7-searchbar-placeholder-color: rgba(255, 255, 255, 0.4);
  --f7-searchbar-input-text-color: #fff;
  --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: 8px;
  --f7-searchbar-inner-padding-right: 8px;
  --f7-searchbar-input-font-size: 16px;
  --f7-searchbar-input-border-radius: 24px;
  --f7-searchbar-input-height: 48px;
  --f7-searchbar-inline-input-height: 48px;
  --f7-searchbar-inline-input-border-radius: 24px;
  --f7-searchbar-input-padding-horizontal: 16px;
  --f7-searchbar-inline-input-padding-horizontal: 16px;
  --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.25);
  --f7-searchbar-in-page-content-margin: 16px 0;
  --f7-searchbar-in-page-content-box-shadow: none;
  --f7-searchbar-in-page-content-border-radius: 24px;
  --f7-searchbar-in-page-content-input-border-radius: 24px;
  --f7-searchbar-bg-color: transparent;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-searchbar-link-color: var(--f7-md-on-surface);
  --f7-searchbar-search-icon-color: var(--f7-md-on-surface);
  --f7-searchbar-input-clear-button-color: var(--f7-md-on-surface);
  --f7-searchbar-placeholder-color: var(--f7-md-on-surface-variant);
  --f7-searchbar-input-bg-color: var(--f7-md-secondary-container);
  --f7-searchbar-input-text-color: var(--f7-md-on-surface);
}

例

searchbar.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Searchbar</div>
      <div class="subnavbar">
        <form data-search-container=".search-list" data-search-in=".item-title" class="searchbar searchbar-init">
          <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">
    <div class="searchbar-backdrop"></div>

    <div class="list list-strong-ios list-outline-ios list-dividers-ios simple-list searchbar-not-found">
      <ul>
        <li>Nothing found</li>
      </ul>
    </div>
    <div class="list list-strong-ios list-outline-ios list-dividers-ios search-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>
</div>

searchbar-expandable.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="left sliding">
        <a class="link back">
          <i class="icon icon-back"></i>
          <span class="if-not-md">Back</span>
        </a>
      </div>
      <div class="title sliding">Searchbar</div>
      <div class="right">
        <a class="link icon-only searchbar-enable" data-searchbar=".searchbar-demo">
          <i class="icon f7-icons if-not-md">search</i>
          <i class="icon material-icons md-only">search</i>
        </a>
      </div>
      <form data-search-container=".search-list" data-search-in=".item-title"
        class="searchbar searchbar-expandable searchbar-demo searchbar-init">
        <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 class="searchbar-backdrop"></div>
    <div class="list list-strong-ios list-outline-ios list-dividers-ios simple-list searchbar-not-found">
      <ul>
        <li>Nothing found</li>
      </ul>
    </div>
    <div class="list list-strong-ios list-outline-ios list-dividers-ios search-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>
</div>

このドキュメントを改善する

このページについて

検索バーのレイアウト
検索バーの種類

固定検索バー
静的検索バー
拡張可能な検索バー
インライン検索バー

検索バーの動作クラス
検索バーのアプリメソッド
検索バーのパラメーター
検索バーのメソッドとプロパティ
検索バーのイベント

DOM イベント
アプリと検索バーのインスタンスのイベント

検索バーの自動初期化
CSS変数
例