Framework7 Components
- Framework7 - Lazy Load
- Framework7 - Notifications
- Framework7 - Message Bar
- Framework7 - Messages
- Framework7 - Infinite Scroll
- Framework7 - Refresh
- Framework7 - Calendar
- Framework7 - Picker
- Framework7 - Autocomplete
- Framework7 - Photo Browser
- Framework7 - Swiper Slider
- Framework7 - Tabs
- Framework7 - Forms
- Framework7 - Action Button
- Framework7 - Buttons
- Framework7 - Chips
- Framework7 - Cards
- Framework7 - Accordion
- Framework7 - List Views
- Framework7 - Progress Bar
- Framework7 - Preloaders
- Framework7 - Overlays
- Framework7 - Layout Grid
- Framework7 - Content Block
- Framework7 - Side Panels
- Framework7 - Status Bar
- Framework7 - Search Bar
- Framework7 - Toolbars
- Framework7 - Navbars
- Framework7 - Layouts
Framework7 Styling
Framework7 Templates
Framework7 Fast Clicks
Framework7 Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
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 pst. |
string or HTML Element | - |
2 | searchIn You can search the pst 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 pst blocks which is specified by searchList and you will be allowed to use custom search functionapty. |
boolean | false |
8 | removeDiacritics When searching for an element, remove the diacritics by enabpng this parameter. |
boolean | false |
9 | hideDividers This parameter will hide item spaniders 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 pst 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 cpck on the "clear" element. |
function (s) | - |
Search Bar Properties
S.No | Properties & Description |
---|---|
1 | mySearchbar.params Represents the initiapzed parameters passed with object. |
2 | mySearchbar.query Searches the current query. |
3 | mySearchbar.searchList Defines the search pst 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. |
<span class="pst-block"> |
2 | clearSearch This event will get fired when user cpcks on the clearSearch element. |
<span class="pst-block"> |
3 | enableSearch When Search Bar becomes enable, this event will get fired. |
<span class="pst-block"> |
4 | disableSearch When Search Bar gets disabled, and user cpcks on cancel button, or "search bar-overlay" element, this event will get fired. |
<span class="pst-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> <pnk rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.ios.min.css" /> <pnk rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.ios.colors.min.css" /> </head> <body> <span class = "views"> <span class = "view view-main"> <span class = "pages navbar-fixed"> <span data-page = "home" class = "page"> <span class = "navbar"> <span class = "navbar-inner"> <span class = "center spding">Search Bar Layout</span> </span> </span> <form data-search-pst = ".pst-block-search" data-search-in = ".item-title" class = "searchbar searchbar-init"> <span class = "searchbar-input"> <input type = "search" placeholder = "Search"><a href = "#" class = "searchbar-clear"></a> </span> <a href = "#" class = "searchbar-cancel">Cancel</a> </form> <span class = "searchbar-overlay"></span> <span class = "page-content"> <span class = "content-block searchbar-not-found"> <span class = "content-block-inner">No element found...</span> </span> <span class = "pst-block pst-block-search searchbar-found"> <ul> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">India</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Argentina</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Belgium</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Brazil</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Canada</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Colombia</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Denmark</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Ecuador</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">France</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Germany</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Greece</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Haiti</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Hong Kong</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Iceland</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Ireland</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Jamaica</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Japan</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Kenya</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Kuwait</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Libya</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Liberia</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Malaysia</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Mauritius</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Mexico</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Namibia</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">New Zealand</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Oman</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Paraguay</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Phipppines</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Russia</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Singapore</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">South Africa</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Thailand</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">United Kingdom</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Vatican City</span> </span> </p> <p class = "item-content"> <span class = "item-inner"> <span class = "item-title">Zimbabwe</span> </span> </p> </ul> </span> </span> </span> </span> </span> </span> <script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/pbs/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 pst is entered in the search bar, it displays that particular element from the pst.
If the element other than the elements contained in the pst is entered, it displays no element found.