”;
Description
Framework 7 allows searching the elements by using the searchbar class.
Search Bar Parameters
| S.No | Parameters & Description | Type | Default |
|---|---|---|---|
| 1 |
searchList It searches the CSS selector or HTML element of the list. |
string or HTML Element | – |
| 2 |
searchIn You can search the list view elements of CSS selectors, also searches the elements by passing .item-title, .item-text classes. |
string | ”.item-title” |
| 3 |
found It searches the CSS selector or HTML element using “found” element. Further, it uses .searchbar-found element if there is no element specified. |
string or HTML Element | – |
| 4 |
notfound It searches the CSS selector or HTML element using “not-found” element. Further, it uses .searchbar-not-found element if there is no element specified. |
string or HTML Element | – |
| 5 |
overlay It searches the CSS selector or HTML element using “searchbar overlay” element and uses .searchbar-overlay element, if there is no element specified. |
string or HTML Element | – |
| 6 |
ignore You can ignore the CSS selector for items by using the searchbar. |
string | ”.searchbar-ignore” |
| 7 |
customSearch When it is enabled, the searchbar will not search through any of list blocks which is specified by searchList and you will be allowed to use custom search functionality. |
boolean | false |
| 8 |
removeDiacritics When searching for an element, remove the diacritics by enabling this parameter. |
boolean | false |
| 9 |
hideDividers This parameter will hide item dividers and group title, if there are no items. |
boolean | true |
| 10 |
hideGroups This parameter will hide the groups, if there are no items found in the list view groups. |
boolean | true |
Search Bar Callbacks
| S.No | 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.No | 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.No | 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 destroys the search bar instance. |
Search Bar JavaScript Events
| S.No | 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 following example demonstrates the 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 us carry out the following steps to see how the above given code works −
-
Save the above given HTML code search_bar.html file in your server root folder.
-
Open this HTML file as http://localhost/search_bar.html and the output is displayed as shown below.
-
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.
”;