Framework7 Search Bar - Framework7

What is the use of search Bar in Framework7?

Description

Framework 7 allows to search elements using the searchbar class.

Search Bar Parameters

S.N.

Parameters & Description

Type

Default

1

searchList
This will search the CSS selector or HTML element of the list.

string or HTML Element

-

2

searchIn
Users can search the list view elements of CSS selectors and the elements by passing .item-title, .item-text classes.

string

'.item-title'

3

found
This will search 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
This will search 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
This will search 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
Users can ignore the CSS selector for items by using the searchbar.

string

'.searchbar-ignore'

7

customSearch
When it is enabled, searchbar will not search through any of list blocks which is specified by searchList and users will be allowed to use custom search functionality.

boolean

false

8

removeDiacritics
While searching for an element, remove the diacritics by enabling this parameter.

boolean

false

9

hideDividers
This parameter will hide the 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.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
This will search the current query.

3

mySearchbar.searchList
This will define the search list block.

4

mySearchbar.container
This will define the search bar container with HTML element.

5

mySearchbar.input
This will define the search bar input with HTML element.

6

mySearchbar.active
This will define whether search bar is enabled or disabled.

Search Bar Methods

S.N.

Methods & Description

1

mySearchbar.search(query);
This method will search the passed query.

2

mySearchbar.enable();
This will enable the search bar.

3

mySearchbar.disable();
This will disable the search bar.

4

mySearchbar.clear();
Users can clear the query and search results.

5

mySearchbar.destroy();
This will destroy the search bar instance.

Search Bar JavaScript Events

S.N.

Event & Description

Target

1

search
Users 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:

Output

Below are the 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 will display that particular element from the list.
  • If the element other than the elements contained in the list is entered, it will display no element found.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Framework7 Topics