搜索栏
搜索栏允许用户通过列表视图元素进行搜索。也可以作为自定义搜索的视觉 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">- Searchbar “取消”按钮，将禁用 Searchbar，重置搜索结果并清除搜索字段。可选元素<div class="searchbar-backdrop">- 半透明 searchbar 背景，在我们启用 searchbar 时会变得可见。建议将此元素放置在可滚动页面中的page-content
Searchbar 类型
现在让我们来看看我们可以在页面结构中放置 Searchbar 的地方。有几个选择
固定 Searchbar
固定 Searchbar 始终在屏幕上可见，与页面滚动无关。在这种情况下，它必须根据以下规则之一进行放置
- 它可以是页面的直接子项，如果页面还有固定导航栏和/或工具栏，那么它必须在导航栏和工具栏之后
<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>
静态 Searchbar
在这种情况下，Searchbar 只是可滚动页面内容的一部分
<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>可扩展 Searchbar
禁用时可扩展 Searchbar 会隐藏，启用时则会变得可见。它的布局很严格，必须放在导航栏内
<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">- 启用/展开 Searchbar 的链接。可选或可放置在任何其他地方。data-searchbar属性包含要启用的 Searchbar 的 CSS 选择器。- Searchbar 有额外的
searchbar-expandable类。它是可扩展 Searchbar 工作所必需的
内联 Searchbar
内联 Searchbar 被设计为用于其他组件内。它有简化的布局 - 没有 .searchbar-inner，并且建议在没有禁用按钮的情况下使用它。
我们只需要将 searchbar-inline 类添加到 Searchbar 中就可以使其内联
<!-- 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>
Searchbar 行为类
还有几个 CSS 类可以添加到元素中，这些类将在 Searchbar 处于活动状态时定义其行为
searchbar-hide-on-enable- 在页面上有此类的元素将在启用 searchbar 时隐藏searchbar-hide-on-search- 在页面上有此类的元素将在搜索期间隐藏searchbar-not-found- 此类元素默认隐藏，并在没有搜索结果时可见searchbar-found- 此类元素默认可见，在没有搜索结果时隐藏searchbar-ignore- searchbar 将不会在搜索结果中考虑此元素
例如
<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>
Searchbar 应用程序方法
现在，当我们有搜索栏的 HTML 时，我们需要初始化它。我们需要使用相关的 App 方法
| app.searchbar.create(parameters) | 用参数初始化搜索栏
|
| app.searchbar.destroy(el) | 销毁搜索栏实例
|
| app.searchbar.get(el) | 通过 HTML 元素获取搜索栏实例
|
| app.searchbar.clear(el) | 清除搜索栏文本输入
|
| app.searchbar.enable(el) | 启用搜索栏
|
| app.searchbar.disable(el) | 禁用搜索栏
|
| app.searchbar.toggle(el) | 切换搜索栏：如果已禁用则启用，如果已启用则禁用
|
| app.searchbar.search(el, query) | 触发搜索栏搜索 query
|
搜索栏参数
让我们看一下创建/初始化搜索栏需要的所有可用参数列表
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| el | string HTMLElement | 搜索栏元素的 CSS 选择器或 HTML 元素（form class="searchbar"） | |
| 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 | 搜索栏“found”元素的 CSS 选择器或 HTMLElement，当没有搜索结果时可将其隐藏 |
| notFoundEl | string HTMLElement | .searchbar-not-found | 搜索栏“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({ /* 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 为前缀的相同名称。
| 事件 | 目标 | 参数 | 说明 |
|---|---|---|---|
| 搜索 | 搜索栏 | (searchbar, query, previousQuery) | 事件将在搜索期间（搜索字段更改）触发。作为参数，事件处理程序接收搜索栏实例、当前查询和前一个查询 |
| searchbarSearch | 应用程序 | ||
| 清除 | 搜索栏 | (searchbar, previousQuery) | 当用户点击搜索栏的“清除”元素时，将触发该事件。作为参数，事件处理程序接收搜索栏实例和之前的（清除之前）查询 |
| searchbarClear | 应用程序 | ||
| 启用 | 搜索栏 | (searchbar) | 当搜索栏变为活动/启用时，将触发该事件。作为参数，事件处理程序接收搜索栏实例 |
| searchbarEnable | 应用程序 | ||
| 禁用 | 搜索栏 | (searchbar) | 当搜索栏变为非活动/禁用时，将触发该事件。作为参数，事件处理程序接收搜索栏实例 |
| searchbarDisable | 应用程序 | ||
| beforeDestroy | 搜索栏 | (searchbar) | 在销毁搜索栏实例之前，将触发该事件 |
| searchbarBeforeDestroy | 应用程序 |
搜索栏自动初始化
如果您不需要使用搜索栏 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>用于 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>