开发手册 欢迎您!
软件开发者资料库

Framework7 - 搜索栏

Framework7搜索栏 - 从概述,环境,布局,导航栏,工具栏,搜索栏,状态栏,侧面板,内容块,布局网格,叠加层,预加载器,进度条,列表视图,手风琴,卡片,芯片,按钮开始学习Framework7 ,动作按钮,窗体,选项卡,Swiper滑块,照片浏览器,自动完成,选择器,日历,刷新,无限滚动,消息,消息栏,通知,延迟加载,颜色主题,细线,模板概述,自动编译,Template7页面,活动状态,点击保持事件,触摸波纹。

描述

框架7允许使用搜索栏类搜索元素.

搜索栏参数

S.No参数&说明类型默认
1

searchList

它搜索列表的CSS选择器或HTML元素.

string或HTML Element-
2

searchIn

您可以搜索CSS选择器的列表视图元素,也可以通过传递 .item-title .item-text 类.

string'.item-title'
3

found

它使用"found"元素搜索CSS选择器或HTML元素.此外,如果没有指定元素,它使用 .searchbar-found 元素.

string或HTML Element-
4

notfound

它使用"not-found"元素搜索CSS选择器或HTML元素.此外,如果没有指定元素,它使用 .searchbar-not-found 元素.

string或HTML Element-
5

overlay

它使用"searchbar overlay"元素搜索CSS选择器或HTML元素并使用 .searchbar-overlay 元素,如果没有指定元素.

string或HTML Element-
6

ignore

您可以使用搜索栏忽略项目的CSS选择器.

string'.searchbar-ignore'
7

customSearch

启用后,搜索栏不会搜索 searchList 指定的任何列表块,您将被允许使用自定义搜索功能离度.

booleanfalse
8

removeDiacritics

搜索元素时,通过启用此参数来删除变音符号.

booleanfalse
9

hideDividers

如果没有项目,此参数将隐藏项目分隔符和组标题.

booleantrue
10

hideGroups

此参数将隐藏组,如果有没有在列表视图组中找到的项目.

booleantrue

搜索栏回调

S.NoCallbacks&说明类型默认
1

onSearch

此方法将在搜索时触发回调函数.

function(s)-
2

onEnable

当搜索栏变为活动状态时,此方法将触发回调函数.

function(s)-
3

onDisable

这当搜索栏变为非活动状态时,方法将触发回调函数.

function(s)-
4

onClear

单击"clear"元素时,此方法将触发回调函数.

function(s)-

搜索栏属性

S.No属性&说明
1

mySearchbar.params

表示用对象传递的初始化参数.

2

mySearchbar.query

搜索当前查询.

3

mySearchbar.searchList

定义搜索列表块.

4

mySearchbar.container

使用HTML元素定义搜索栏容器.

5

mySearchbar.input

使用HTML元素定义搜索栏输入.

6

mySearchbar.active

它定义是启用还是禁用搜索栏.

搜索栏方法

S.NoMethods & 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.NoEvent & DescriptionTarget
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中滚动时使用搜索栏:

                           Search Bar Layout                                                                                                                                          Search Bar Layout
                     
                                                                                                                                             Cancel                                                                                                                                       No element found...                                                                                       
                                                                                              India                                                                                                                                                                              Argentina                                                                                                                                                                              Belgium                                                                                                                                                                              Brazil                                                                                                                                                                              Canada                                                                                                                                                                              Colombia                                                                                                                                                                              Denmark                                                                                                                                                                              Ecuador                                                                                                                                                                              France                                                                                                                                                                              Germany                                                                                                                                                                              Greece                                                                                                                                                                              Haiti                                                                                                                                                                              Hong Kong                                                                                                                                                                              Iceland                                                                                                                                                                              Ireland                                                                                                                                                                              Jamaica                                                                                                                                                                              Japan                                                                                                                                                                              Kenya                                                                                                                                                                              Kuwait                                                                                                                                                                              Libya                                                                                                                                                                              Liberia                                                                                                                                                                              Malaysia                                                                                                                                                                              Mauritius                                                                                                                                                                              Mexico                                                                                                                                                                              Namibia                                                                                                                                                                              New Zealand                                                                                                                                                                              Oman                                                                                                                                                                              Paraguay                                                                                                                                                                              Philippines                                                                                                                                                                              Russia                                                                                                                                                                              Singapore                                                                                                                                                                              South Africa                                                                                                                                                                              Thailand                                                                                                                                                                              United Kingdom                                                                                                                                                                              Vatican City                                                                                                                                                                              Zimbabwe                                                                                 
                                                                                                                                 

Output

让我们执行以下步骤,看看上面给出的代码是如何工作的

  • 将上面给出的HTML代码search_bar.html文件保存在服务器根文件夹中。

  • 以http://localhost/search_bar.html打开此HTML文件,输出显示如下。

  • 如果列表中包含的元素在搜索栏中输入,则会在列表中显示该特定元素。

  • 如果输入了列表中包含的元素以外的元素,则不会显示找到的元素。


ion () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?843cad737da0ae856cb26e84eafcd9bb"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })();