描述
框架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 指定的任何列表块,您将被允许使用自定义搜索功能离度. | boolean | false |
8 | removeDiacritics 搜索元素时,通过启用此参数来删除变音符号. | boolean | false |
9 | hideDividers 如果没有项目,此参数将隐藏项目分隔符和组标题. | boolean | true |
10 | hideGroups 此参数将隐藏组,如果有没有在列表视图组中找到的项目. | boolean | true |
搜索栏回调
S.No | Callbacks&说明 | 类型 | 默认 |
---|---|---|---|
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.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中滚动时使用搜索栏:
Search Bar Layout Search Bar LayoutNo 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文件,输出显示如下。
如果列表中包含的元素在搜索栏中输入,则会在列表中显示该特定元素。
如果输入了列表中包含的元素以外的元素,则不会显示找到的元素。