搜尋列

搜尋列允許使用者透過清單檢視元素進行搜尋。或者，它可用作自訂搜尋實現的視覺化 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(參數)	使用參數初始化搜尋列參數 - 物件 - 具有搜尋列參數的物件方法會傳回已初始化的搜尋列實例
app.searchbar.destroy(el)	銷毀搜尋列實例 el - HTMLElement 或字串 (使用 CSS 選擇器) 或物件。要銷毀的搜尋列元素或搜尋列實例。
app.searchbar.get(el)	透過 HTML 元素取得搜尋列實例 el - HTMLElement 或字串 (使用 CSS 選擇器)。搜尋列元素。方法會傳回搜尋列的實例
app.searchbar.clear(el)	清除搜尋列文字輸入 el - HTMLElement 或字串 (使用 CSS 選擇器)。搜尋列元素。方法會傳回搜尋列的實例
app.searchbar.enable(el)	啟用搜尋列 el - HTMLElement 或字串 (使用 CSS 選擇器)。搜尋列元素。方法會傳回搜尋列的實例
app.searchbar.disable(el)	停用搜尋列 el - HTMLElement 或字串 (使用 CSS 選擇器)。搜尋列元素。方法會傳回搜尋列的實例
app.searchbar.toggle(el)	切換搜尋列：如果已停用，則啟用；如果已啟用，則停用 el - HTMLElement 或字串 (使用 CSS 選擇器)。搜尋列元素。方法會傳回搜尋列的實例
app.searchbar.search(el, 查詢)	觸發搜尋列搜尋 `查詢` el - HTMLElement 或字串 (使用 CSS 選擇器)。搜尋列元素。查詢 - 字串。搜尋查詢。方法會傳回搜尋列的實例

搜尋列參數

讓我們檢視建立/初始化搜尋列所需的所有可用參數清單

參數	類型	預設值	說明
el	字串 HTMLElement		搜尋列元素的 CSS 選擇器或 HTML 元素 (`form class="searchbar"`)
inputEl	字串 HTMLElement		CSS 選擇器或搜尋列輸入元素的 HTML 元素。預設 (如果未傳遞) 將嘗試在搜尋列中尋找 `input type="search"`
disableButton	布林值	true	啟用停用按鈕
disableButtonEl	字串 HTMLElement		CSS 選擇器或搜尋列停用按鈕的 HTML 元素。預設 (如果未傳遞) 將嘗試在搜尋列中尋找具有 `search-disable-button` 類別的元素
searchContainer	字串 HTMLElement		CSS 選擇器或要搜尋的清單區塊的 HTML 元素
searchIn	字串		清單檢視元素欄位的 CSS 選擇器，我們需要在其中進行搜尋。我們通常透過元素標題進行搜尋，在這種情況下，我們需要傳遞 `.item-title`。也可以傳遞幾個要搜尋的元素，例如 `.item-title, .item-text`
searchItem	字串	li	單一搜尋項目的 CSS 選擇器。如果我們在清單檢視中進行搜尋，則它必須是單一清單元素 `li`
searchGroup	字串	.list-group	群組元素的 CSS 選擇器。在啟用 `hideGroups` 以隱藏群組時使用。如果我們在清單檢視中進行搜尋，則它通常是清單群組。
searchGroupTitle	字串	.list-group-title	群組標題的 CSS 選擇器。在啟用 `hideGroupTitles` 以隱藏群組標題時使用。如果我們在清單檢視中進行搜尋，則它通常是清單群組標題。
foundEl	字串 HTMLElement	.searchbar-found	搜尋列「已找到」元素的 CSS 選擇器或 HTMLElement，在沒有搜尋結果時隱藏它
notFoundEl	字串 HTMLElement	.searchbar-not-found	搜尋列「未找到」元素的 CSS 選擇器或 HTMLElement，在沒有搜尋結果時顯示它
hideOnEnableEl	字串 HTMLElement	.searchbar-hide-on-enable	啟用搜尋列時要隱藏的元素的 CSS 選擇器或 HTMLElement
hideOnSearchEl	字串 HTMLElement	.searchbar-hide-on-search	在搜尋列搜尋時要隱藏的元素的 CSS 選擇器或 HTMLElement
backdrop	布林值		啟用搜尋列背景元素。預設情況下，內嵌搜尋列已停用
backdropEl	字串 HTMLElement		搜尋列背景元素的 CSS 選擇器或 HTMLElement。如果未傳遞，且 `backdrop` 參數為 `true`，則會尋找 `.searchbar-backdrop` 元素。如果找不到，則會自動建立一個
ignore	字串	.searchbar-ignore	搜尋列忽略的項目 CSS 選擇器，並始終顯示在搜尋結果中
customSearch	布林值	false	啟用後，搜尋列不會搜尋 `searchContainer` 指定的任何清單區塊，您將可以使用自訂搜尋功能，例如呼叫外部 API 取得搜尋結果並手動顯示
removeDiacritics	布林值	false	啟用後，會在搜尋期間移除/取代變音符號 (á、í、ó 等)
hideGroupTitles	布林值	true	如果啟用，則搜尋會考慮群組標題，並在群組標題後方沒有找到項目時將其隱藏
hideGroups	布林值	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)	當 Searchbar 變得活躍/啟用時，將會觸發事件。事件處理常式會收到 searchbar 實例作為引數
searchbarEnable	app	(searchbar)	當 Searchbar 變得活躍/啟用時，將會觸發事件。事件處理常式會收到 searchbar 實例作為引數
disable	searchbar	(searchbar)	當 Searchbar 變得不活躍/停用時，將會觸發事件。事件處理常式會收到 searchbar 實例作為引數
searchbarDisable	app	(searchbar)	當 Searchbar 變得不活躍/停用時，將會觸發事件。事件處理常式會收到 searchbar 實例作為引數
beforeDestroy	searchbar	(searchbar)	在搜尋列實例即將被銷毀之前，將會觸發事件
searchbarBeforeDestroy	app	(searchbar)	在搜尋列實例即將被銷毀之前，將會觸發事件

Searchbar 自動初始化

如果您不需要使用 Searchbar API，而且您的 Searchbar 在頁面內部，並在頁面初始化時出現在 DOM 中，那麼它可以透過僅將其他 searchbar-init 類別新增到 searchbar 元素來自動初始化，而且所有必要的參數都可以使用 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>

在 camelCase 中使用的參數，例如 searchContainer，在 data- 屬性中應使用 kebab-case，例如 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 事件
應用程式和搜尋列實例事件

Searchbar 自動初始化
CSS 變數
範例