- 开始使用
- 事件
- 路由 / 导航
- 存储
- 组件
- Framework7图标
- 样式
- Dom7
- 触摸实用工具
- 实用工具
- 插件 API
- 懒加载模块
- 自定义构建
搜索栏
搜索栏允许用户搜索列表视图元素。或者可以用作自定义搜索实现的视觉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>Where:
<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
搜索栏类型
现在我们来看看可以在页面结构中放置搜索栏的位置。有几个选项：
固定搜索栏
固定搜索栏始终在屏幕上可见，无论页面是否滚动。在这种情况下，它必须按照以下规则之一放置：
- 它可以是页面的直接子元素，如果页面也有固定的Navbar和/或Toolbar，则必须在Navbar和Toolbar之后：
<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> - 它可以放置在Navbar内的子Navbar中（推荐方式）：
<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>可扩展搜索栏
可展开搜索栏在禁用时隐藏，在启用时可见。其布局相当严格，必须放置在Navbar内：
<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>
Where:
<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>
搜索栏App方法
现在，当我们有搜索栏的HTML时，我们需要初始化它。我们需要使用相关应用的方法：
| app.searchbar.create(参数) | 使用参数初始化搜索栏
|
| 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 | 字符串 HTMLElement | 搜索栏元素的CSS选择器或HTML元素 (form class="searchbar") | |
| inputEl | 字符串 HTMLElement | 搜索栏输入元素的CSS选择器或HTML元素。默认情况下（如果未传递），将尝试在搜索栏内查找input type="search" inside of searchbar | |
| disableButton | 布尔值 | true | 启用禁用按钮 |
| disableButtonEl | 字符串 HTMLElement | 搜索栏禁用按钮的CSS选择器或HTML元素。默认情况下（如果未传递），将尝试在搜索栏内查找具有search-disable-button类的元素 | |
| searchContainer | 字符串 HTMLElement | 搜索列表块的CSS选择器或HTML元素 | |
| searchIn | 字符串 | List View元素的字段的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 |
| 背景遮罩 | 布尔值 | 启用搜索栏背景元素。默认情况下，对于内联搜索栏禁用 | |
| backdropEl | 字符串 HTMLElement | 搜索栏背景元素的 CSS 选择器或 HTMLElement。如果未传递并且backdrop参数是true那么它将查找.searchbar-backdrop元素。如果没有找到，它将自动创建一个 | |
| ignore | 字符串 | .searchbar-ignore | 搜索栏忽略的项目的 CSS 选择器，并始终在搜索结果中显示 |
| customSearch | 布尔值 | false | 当启用时，搜索栏将不会搜索任何由searchContainer指定的列表块，您将能够使用自定义搜索功能，例如，调用外部 API 并显示搜索结果，以及手动显示它们 |
| removeDiacritics | 布尔值 | false | 启用在搜索过程中删除/替换变音符号（á、í、ó 等） |
| hideGroupTitles | 布尔值 | true | 如果启用，则搜索将考虑组标题，并在它们后面没有找到项目时隐藏它们 |
| hideGroups | 布尔值 | true | 如果启用，则搜索将考虑列表视图组，并在这些组内没有找到项目时隐藏它们 |
| on | 对象 | 带有事件处理程序的对象。例如： |
搜索栏方法和属性
要创建搜索栏，我们必须调用：
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(事件上触发, 处理程序) | 添加事件处理程序 |
| searchbar.once(事件上触发, 处理程序) | 添加在触发后将被移除的事件处理程序 |
| searchbar.off(事件上触发, 处理程序) | 移除事件处理程序 |
| searchbar.off(事件上触发) | 移除指定事件的所有处理程序 |
| searchbar.emit(事件上触发, ...args) | 在实例上触发事件 |
搜索栏事件
搜索栏将在搜索栏元素和app及搜索栏实例上触发以下DOM事件：
DOM 事件
| 事件 | Target | 描述 |
|---|---|---|
| searchbar:search | 搜索栏元素<form class="searchbar"> | 在搜索过程中（搜索字段变化）将触发事件。事件详情（e.detail）包含一个对象，其中e.detail) contains an object with 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"> | 在搜索栏实例将被销毁之前将触发事件 |
App和搜索栏实例事件
搜索栏实例在自身实例和app实例上发出事件。App实例事件名称以相同的前缀开头searchbar.
| 事件 | Target | 参数 | 描述 |
|---|---|---|---|
| search | searchbar | (searchbar, query, previousQuery) | 在搜索过程中（搜索字段变化）将触发事件。作为参数事件处理程序接收搜索栏实例、当前查询和之前的查询 |
| searchbarSearch | app | ||
| clear | searchbar | (searchbar, previousQuery) | 当用户点击搜索栏的“清除”元素时将触发事件。作为参数事件处理程序接收搜索栏实例和之前的（清除前）查询 |
| searchbarClear | app | ||
| enable | searchbar | (searchbar) | 当搜索栏变为激活/启用时将触发事件。作为参数事件处理程序接收搜索栏实例 |
| searchbarEnable | app | ||
| disable | searchbar | (searchbar) | 当搜索栏变为非激活/禁用时将触发事件。作为参数事件处理程序接收搜索栏实例 |
| searchbarDisable | app | ||
| beforeDestroy | searchbar | (searchbar) | 在搜索栏实例将被销毁之前将触发事件 |
| searchbarBeforeDestroy | app |
搜索栏自动初始化
如果你不需要使用搜索栏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>