Framework7 - Search Bar
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.
