Description
Framework 7 allows searching the elements by using the searchbar class.Search Bar Parameters
Search Bar Callbacks
| S.N. | Callbacks & Description | Type | Default |
|---|---|---|---|
| 1 | onSearch This method will fire callback function while doing search. |
function (s) | - |
| 2 | onEnable This method will fire callback function when Search Bar becomes active. |
function (s) | - |
| 3 | onDisable This method will fire callback function when Search Bar becomes inactive. |
function (s) | - |
| 4 | onClear This method will fire callback function when you click on the "clear" element. |
function (s) | - |
Search Bar Properties
| S.N. | Properties & Description |
|---|---|
| 1 | mySearchbar.params Represents the initialized parameters passed with object. |
| 2 | mySearchbar.query Searches the current query. |
| 3 | mySearchbar.searchList Defines the search list block. |
| 4 | mySearchbar.container Defines the search bar container with HTML element. |
| 5 | mySearchbar.input Defines the search bar input with HTML element. |
| 6 | mySearchbar.active It defines whether search bar is enabled or disabled. |
Search Bar Methods
| S.N. | Methods & Description |
|---|---|
| 1 | mySearchbar.search(query); This method searches the passed query. |
| 2 | mySearchbar.enable(); It enables the search bar. |
| 3 | mySearchbar.disable(); It disables the search bar. |
| 4 | mySearchbar.clear(); You can clear the query and search results. |
| 5 | mySearchbar.destroy(); It destroy the search bar instance. |
Search Bar JavaScript Events
| S.N. | Event & Description | Target |
|---|---|---|
| 1 | search You can fire this event while searching elements. |
<div class="list-block"> |
| 2 | clearSearch This event will get fired when user clicks on the clearSearch element. |
<div class="list-block"> |
| 3 | enableSearch When Search Bar becomes enable, this event will get fired. |
<div class="list-block"> |
| 4 | disableSearch When Search Bar gets disabled, and user clicks on cancel button, or "search bar-overlay" element, this event will get fired. |
<div class="list-block"> |
Example
The below example demonstrates use of search bar on scroll in the Framework7:<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>Search Bar Layout</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css"> </head> <body> <div class="views"> <div class="view view-main"> <div class="pages navbar-fixed"> <div data-page="home" class="page"> <div class="navbar"> <div class="navbar-inner"> <div class="center sliding">Search Bar Layout</div> </div> </div> <form data-search-list=".list-block-search" data-search-in=".item-title" class="searchbar searchbar-init"> <div class="searchbar-input"> <input type="search" placeholder="Search"><a href="#" class="searchbar-clear"></a> </div> <a href="#" class="searchbar-cancel">Cancel</a> </form> <div class="searchbar-overlay"></div> <div class="page-content"> <div class="content-block searchbar-not-found"> <div class="content-block-inner">No element found...</div> </div> <div class="list-block list-block-search searchbar-found"> <ul> <li class="item-content"> <div class="item-inner"> <div class="item-title">India</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Argentina</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Belgium</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Brazil</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Canada</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Colombia</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Denmark</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Ecuador</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">France</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Germany</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Greece</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Haiti</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Hong Kong</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Iceland</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Ireland</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Jamaica</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Japan</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Kenya</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Kuwait</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Libya</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Liberia</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Malaysia</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Mauritius</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Mexico</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Namibia</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">New Zealand</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Oman</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Paraguay</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Philippines</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Russia</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Singapore</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">South Africa</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Thailand</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">United Kingdom</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Vatican City</div> </div> </li> <li class="item-content"> <div class="item-inner"> <div class="item-title">Zimbabwe</div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script> <script> var myApp = new Framework7(); var mainView = myApp.addView('.view-main'); </script> </body> </html>
Output
Let's carry out the following steps to see how above code works:- Save above html code as search_bar.html file in your server root folder.
- Open this HTML file as http://localhost/search_bar.html and output as below gets displayed.
- If the element contained in the list is entered in the search bar, it displays that particular element from the list.
- If the element other than the elements contained in the list is entered, it displays no element found.
No comments:
Post a Comment