📅 最后修改于: 2020-10-25 02:47:39 🧑 作者: Mango
描述
Framework 7允许使用searchbar类搜索元素。
搜索栏参数
| 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 |
搜索栏回调
| 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) |
– |
搜索栏属性
| 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.
|
搜索栏方法
| 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.
|
搜索栏JavaScript事件
| S.No |
Event & Description |
Target |
| 1 |
search
You can fire this event while searching elements.
|
|
| 2 |
clearSearch
This event will get fired when user clicks on the clearSearch element.
|
|
| 3 |
enableSearch
When Search Bar becomes enable, this event will get fired.
|
|
| 4 |
disableSearch
When Search Bar gets disabled, and user clicks on cancel button, or “search bar-overlay” element, this event will get fired.
|
|
例
以下示例演示了Framework7中滚动条上搜索栏的使用-
输出
让我们执行以下步骤，看看上面给出的代码如何工作-
-
将上述指定的HTML代码search_bar.html文件保存在服务器的根文件夹中。
-
以http：//localhost/search_bar.html格式打开此HTML文件，并显示输出，如下所示。
-
如果在搜索栏中输入列表中包含的元素，它将显示列表中的特定元素。
-
如果输入了列表中包含的元素以外的其他元素，则不会显示找到的元素。