移动端安卓和IOS开发框架Framework7教程-搜索栏

搜索栏允许用户在列表元素中搜索，或者它可以用来作为UI组件，放到你自己的搜索实现中。

搜索栏布局

搜索栏应该放到“.page”内，“.page-content”前：

1. <div class="page">
2.     <!-- Search bar -->
3.     <form class="searchbar">
4.         <div class="searchbar-input">
5.             <input type="search" placeholder="Search">
6.             <a href="#" class="searchbar-clear"></a>
7.         </div>
8.         <a href="#" class="searchbar-cancel">Cancel</a>
9.     </form>
10.     
11.     <!-- Search bar overlay-->
12.     <div class="searchbar-overlay"></div>
13.     
14.     <!-- Page content -->
15.     <div class="page-content">
16.         <div class="content-block searchbar-not-found">
17.                 Nothing found
18.         </div>
19.  
20.         <div class="list-block list-block-search searchbar-found">
21.             <ul>
22.                 ... list view items ...
23.             </ul>
24.         </div>
25.     </div>
26. </div>

复制

其中：

• form class="searchbar" - 主要的搜索栏容器。它不必是个form元素，但推荐如此。
  • div class="searchbar-input" - 搜索区域和取消按钮的容器
    • input type="search" - search field
    • a class="searchbar-clear" - button to clear field value and reset search results. Optional element
  • a class="searchbar-cancel" - searchbar Cancel button that will deactivate searchbar, reset search results and clear search field. Optional element
• div class="searchbar-overlay" - Add this element right after search bar to enable dark overlay over page content when search bar is active. Optional element.
• "list-block-search" - list block where we are going to search elements.
• "searchbar-found" - element with this class will be displayed if searchbar find elements that match to search query. Visible by default. Optional element.
• "searchbar-not-found" - element with this class will be displayed if searchbar doesn't find elements that match to search query. Hidden by default. Optional element.

Initialize Searchbar with JavaScript

Now, when we have Searchbar' HTML, we need to initialize it. We need to use related App's method:

myApp.searchbar(searchbarContainer, parameters) - initialize searchbar with options

• searchbarContainer - HTMLElement or string (with CSS Selector) of Searchbar container HTML element. Required.
• parameters - object - object with Searchbar parameters. Optional.
• Method returns initialized Searchbar instance

For example:

1. var mySearchbar = app.searchbar('.searchbar', {
2.     searchList: '.list-block-search',
3.     searchIn: '.item-title'
4. });

复制

Note that Searchbar container should be in DOM on a moment of initialization. So if you use it not on home page, you need to initialize it within pageInit event or callback

Searchbar Parameters

Let's look on list of all available parameters:

Parameter Type Default Description Callbacks

searchList	string or HTMLElement		CSS selector or HTML element of list block to search
searchIn	string	'.item-title'	CSS selector of List View element's field where we need to search. Usually we search through element titles ('.item-title'). It is also to pass few elements for search like '.item-title, .item-text'
found	string or HTMLElement		CSS selector or HTMLElement of searchbar "found" element. If not specified, searchbar will look for .searchbar-found element on page
notFoud	string or HTMLElement		CSS selector or HTMLElement of searchbar "not-found" element. If not specified, searchbar will look for .searchbar-not-found element on page
overlay	string or HTMLElement		CSS selector or HTMLElement of searchbar overlay. If not specified, searchbar will look for .searchbar-overlay element on page
ignore	string	'.searchbar-ignore'	CSS selector for items to be ignored by searchbar and always present in search results
customSearch	boolean	false	When enabled searchbar will not search through any of list blocks specified by `searchList` and you will be able to use custom search functionality, for example, for calling external APIs with search results and for displaying them manually
removeDiacritics	boolean	false	Enable to remove/replace diacritics (á, í, ó, etc.) during search
hideDividers	boolean	true	If enabled, then search will consider item dividers and group titles and hide them if there are no found items right after them
hideGroups	boolean	true	If enabled, then search will consider list view groups hide them if there are no found items inside of these groups
onSearch	function (s)		Callback function will be triggered during search (search field change).
onEnable	function (s)		Callback will be triggered when Search Bar becomes active
onDisable	function (s)		Callback will be triggered when Search Bar becomes inactive - when user clicks on "Cancel" button or on "searchbar-overlay" element
onClear	function (s)		Callback will be triggered when user clicks on Search Bar's "clear" element

Searchbar Methods & Properties

After we initialize Searchbar we have its initialized instance in variable (like mySearchbar variable in example above) with helpful methods and properties:

PropertiesMethods

mySearchbar.params	Object with passed initialization parameters
mySearchbar.query	Current search query (search input value)
mySearchbar.searchList	Dom7 element with search list block.
mySearchbar.container	Dom7 element with searchbar container HTML element.
mySearchbar.input	Dom7 element with searchbar input HTML element
mySearchbar.active	Boolean value that represents is searchbar enabled or disabled
mySearchbar.search(query);	Force searchbar to search passed query
mySearchbar.enable();	Enable/activate searchbar
mySearchbar.disable();	Disable/deactivate searchbar
mySearchbar.clear();	Clear search query and update results
mySearchbar.destroy();	Destroy searchbar instance

Initialize Searchbar with HTML

If you don't need to use Searchbar methods and properties you can initialize it using HTML without JavaScript. You can do that just by adding additional "searchbar-init" class to .searchbar. In this case we may pass required parameters using data- attributes.

1. <div class="page">
2.     <!-- Search bar with "searchbar-init" class for auto initialization -->
3.     <form class="searchbar searchbar-init" data-search-list=".list-block-search" data-search-in=".item-title" data-found=".searchbar-found" data-not-found=".searchbar-not-found">
4.         <div class="searchbar-input">
5.             <input type="search" placeholder="Search">
6.             <a href="#" class="searchbar-clear"></a>
7.         </div>
8.         <a href="#" class="searchbar-cancel">Cancel</a>
9.     </form>
10.     
11.     <div class="searchbar-overlay"></div>
12.     
13.     <div class="page-content">
14.         <div class="content-block searchbar-not-found">
15.                 Nothing found
16.         </div>
17.  
18.         <div class="list-block list-block-search searchbar-found">
19.             <ul>
20.                 ... list view items ...
21.             </ul>
22.         </div>
23.     </div>
24. </div>

复制

Parameters that used in camelCase, for example searchList, in data- attributes should be used as hypens-case as data-search-list

Access to Searchbar's Instance

If you initialize Searchbar using HTML it is still possible to access to Searchbar's instance. It is "f7Searchbar" property of searchbar's container HTML element:

1. var mySearchbar = $$('.searchbar')[0].f7Searchbar;
2.  
3. // Now you can use it
4. mySearchbar.search('Hello world');

复制

 

Search Bar Example

In this example we use searchbar with auto initialization

1. <div data-page="home" class="page">
2.   <!-- Search bar -->
3.   <form data-search-list=".list-block-search" data-search-in=".item-title" class="searchbar searchbar-init">
4.     <div class="searchbar-input">
5.       <input type="search" placeholder="Search"><a href="#" class="searchbar-clear"></a>
6.     </div><a href="#" class="searchbar-cancel">Cancel</a>
7.   </form>
8.  
9.   <!-- Search bar overlay -->
10.   <div class="searchbar-overlay"></div>
11.  
12.   <div class="page-content">
13.     <!-- This block will be displayed if nothing found -->
14.     <div class="content-block searchbar-not-found">
15.       <div class="content-block-inner">Nothing found</div>
16.     </div>
17.  
18.     <!-- This block will be displayed if anything found, and this list block is used a searbar target -->
19.     <div class="list-block list-block-search searchbar-found">
20.       <ul>
21.         <li class="item-content">
22.           <div class="item-inner">
23.             <div class="item-title">Acura </div>
24.           </div>
25.         </li>
26.         <li class="item-content">
27.           <div class="item-inner">
28.             <div class="item-title">Audi</div>
29.           </div>
30.         </li>
31.         ...
32.       </ul>
33.     </div>
34.   </div>
35. </div>

复制

实例预览

搜索栏JavaScript事件

事件 目标 描述

搜索	在"data-search-list"<div class="list-block">中被指定的列表元素	在搜索过程中（搜索域改变）事件会被触发。事件包含搜索请求(e.detail.query)和找到的HTML元素(e.detail.foundItems)
清空搜索	在"data-search-list"<div class="list-block">中被指定的列表元素	当用户点击搜索栏“清空”按钮(a href="#" class="searchbar-clear")的时候，事件被触发
启用搜索	在"data-search-list"<div class="list-block">中被指定的列表元素	当搜索栏起作用时，事件被触发
禁用搜索	在"data-search-list"<div class="list-block">中被指定的列表元素	当搜索栏被禁用时 - 用户点击“取消”按钮或"searchbar-overlay"元素，事件被触发