English 中文(简体)
Framework7 - Search Bar
  • 时间:2024-12-22

Framework7 - Search Bar


Previous Page Next Page  

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.