搜索栏 Svelte 组件
搜索栏 Svelte 组件代表 Framework7 的 搜索栏 组件。
搜索栏组件
包含以下组件
搜索栏
搜索栏属性
您可以将所有参数传递给单个 params 属性，或者为每个参数使用单独的道具，通过组件属性指定它们
| 道具 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| <Searchbar> 属性 | |||
| init | 布尔值 | true | 初始化搜索栏 |
| value | 字符串 数字 | 允许指定搜索栏输入的值。当使用 customSearch 启用时非常有用 | |
| form | 布尔值 | true | 主搜索栏元素将用作 form 标签而不是 div |
| placeholder | 字符串 | "搜索" | 输入占位符文本 |
| disableButton | 布尔值 | true | 启用禁用按钮 |
| disableButtonText | 字符串 | 取消 | 禁用按钮文本 |
| clearButton | 布尔值 | true | 启用搜索栏输入清除按钮 |
| expandable | 布尔值 | false | 启用可扩展搜索栏 |
| inline | 布尔值 | false | 启用内联搜索栏 |
| spellcheck | 布尔值 | 在输入元素上设置 spellcheck 属性 | |
| searchContainer | 字符串 对象 | 要搜索的列表块的 CSS 选择器或 HTML 元素 | |
| searchIn | 字符串 | .item-title | 列表视图元素的字段的 CSS 选择器，我们需要在其中搜索。通常我们会搜索元素标题（'.item-title'）。也可以为搜索传递几个元素，例如 '.item-title, .item-text' |
| searchItem | 字符串 | li | 单个搜索项目的 CSS 选择器。如果我们在列表视图中搜索，那么它必须是一个单一的列表元素 li |
| searchGroup | 字符串 | .list-group | 组元素的 CSS 选择器。当 hideGroups 启用时用于隐藏组。如果我们在列表视图中搜索，那么它通常是一个列表组。 |
| searchGroupTitle | 字符串 | .list-group-title | 组标题的 CSS 选择器。当 hideGroupTitles 启用时用于隐藏组标题。如果我们在列表视图中搜索，那么它通常是一个列表组标题。 |
| foundEl | 字符串 对象 | .searchbar-found | 搜索栏“已找到”元素的 CSS 选择器或 HTMLElement。如果未指定，搜索栏将在页面上查找 .searchbar-found 元素 |
| notFoundEl | 字符串 对象 | .searchbar-not-found | 搜索栏“未找到”元素的 CSS 选择器或 HTMLElement。如果未指定，搜索栏将在页面上查找 .searchbar-not-found 元素 |
| backdrop | 布尔值 | 启用搜索栏背景元素。默认情况下，对于内联搜索栏禁用 | |
| backdropEl | 字符串 对象 | 搜索栏背景元素的 CSS 选择器或 HTMLElement。如果未传递且 backdrop 参数为 true，则它将查找 .searchbar-backdrop 元素。如果没有找到，它将自动创建一个 | |
| ignore | 字符串 | .searchbar-ignore | 要被搜索栏忽略且始终出现在搜索结果中的项目的 CSS 选择器 |
| customSearch | 布尔值 | false | 启用后，搜索栏将不会搜索 search-container 指定的任何列表块，您将能够使用自定义搜索功能，例如，用于使用搜索结果调用外部 API 以及手动显示它们 |
| removeDiacritics | 布尔值 | false | 启用以在搜索期间删除/替换变音符号（á、í、ó 等） |
| hideGroupTitles | 布尔值 | true | 如果启用，则搜索将考虑组标题，如果其后没有找到项目，则隐藏它们 |
| hideGroups | 布尔值 | true | 如果启用，则搜索将考虑列表视图组，如果这些组内部没有找到项目，则隐藏它们 |
| outline | 布尔值 | true | 为 iOS 主题添加搜索栏底部细边框（发丝线） |
搜索栏方法
| <Searchbar> 方法 | |
|---|---|
| .search(query) | 强制搜索栏搜索传递的查询 |
| .enable() | 启用/激活搜索栏 |
| .disable() | 禁用/停用搜索栏 |
| .toggle() | 切换搜索栏 |
| .clear() | 清除搜索查询并更新结果 |
搜索栏事件
| 事件 | 参数 | 描述 |
|---|---|---|
| <Searchbar> 事件 | ||
| searchbarSearch | (searchbar, query, previousQuery) | 事件将在搜索期间触发（搜索字段更改）。作为参数，事件接收搜索栏实例、搜索查询和之前的查询 |
| searchbarClear | (searchbar, previousQuery) | 当用户点击搜索栏输入的“清除”按钮时，将触发此事件。作为参数，事件接收搜索栏实例和之前的查询 |
| searchbarEnable | (searchbar) | 当搜索栏变为活动状态时，将触发此事件 |
| searchbarDisable | (searchbar) | 当搜索栏变为非活动/禁用状态时，将触发此事件 |
| change | (event) | 当搜索栏输入元素上发生“change”事件时，将触发此事件 |
| input | (event) | 当搜索栏输入元素上发生“input”事件时，将触发此事件 |
| focus | (event) | 当搜索栏输入元素上发生“focus”事件时，将触发此事件 |
| blur | (event) | 当搜索栏输入元素上发生“blur”事件时，将触发此事件 |
| clickClear | (event) | 当用户点击输入的“清除”按钮时，将触发此事件 |
| clickDisable | (event) | 当用户点击搜索栏禁用按钮时，将触发此事件 |
搜索栏插槽
搜索栏 Svelte 组件具有用于自定义元素的附加插槽
default- 元素将作为<div class="searchbar-inner">元素的子元素插入到最后。与inner-end插槽相同before-inner- 元素将插入到<div class="searchbar-inner">元素之前after-inner- 元素将插入到<div class="searchbar-inner">元素之后inner-start- 元素将作为<div class="searchbar-inner">元素的子元素插入到开头inner-end- 元素将作为<div class="searchbar-inner">元素的子元素插入到最后input-wrap-start- 元素将作为<div class="searchbar-input-wrap">元素的子元素插入到开头input-wrap-end- 元素将作为<div class="searchbar-input-wrap">元素的子元素插入到最后
没有插槽
<Searchbar
disableButtonText="Cancel"
placeholder="Search in items"
clearButton={true}
/>
<!-- Renders to: -->
<form class="searchbar">
<div class="searchbar-inner">
<div class="searchbar-input-wrap">
<input type="search" placeholder="Search">
<i class="searchbar-icon"></i>
<span class="input-clear-button"></span>
</div>
<span class="searchbar-disable-button">Cancel</span>
</div>
</form>有插槽
<Searchbar
disableButtonText="Cancel"
placeholder="Search in items"
clearButton={true}
>
<div slot="inner-start">Inner Start</div>
<div slot="inner-end">Inner End</div>
<div slot="input-wrap-start">Input Wrap Start</div>
<div slot="input-wrap-end">Input Wrap End</div>
<div slot="before-inner">Before Inner</div>
<div slot="after-inner">After Inner</div>
</Searchbar>
<!-- Renders to: -->
<form class="searchbar">
<div slot="before-inner">Before Inner</div>
<div class="searchbar-inner">
<div slot="inner-start">Inner Start</div>
<div class="searchbar-input-wrap">
<div slot="input-wrap-start">Input Wrap Start</div>
<input type="search" placeholder="Search">
<i class="searchbar-icon"></i>
<span class="input-clear-button"></span>
<div slot="input-wrap-end">Input Wrap End</div>
</div>
<span class="searchbar-disable-button">Cancel</span>
<div slot="inner-end">Inner End</div>
</div>
<div slot="after-inner">After Inner</div>
</form>
访问搜索栏实例
如果您使用自动初始化来初始化搜索栏（使用 init={true} 道具），并且需要使用搜索栏 API，您可以通过调用 .instance() 组件方法来访问其已初始化的实例。例如
<Searchbar bind:this={component}>...</Searchbar>
<script>
let component;
// to get instance in some method
component.instance()
</script>
示例
普通搜索栏
searchbar.svelte
<script>
import { Navbar, Page, Searchbar, Subnavbar, List, ListItem } from 'framework7-svelte';
</script>
<Page>
<Navbar title="Searchbar">
<Subnavbar inner={false}>
<Searchbar searchContainer=".search-list" searchIn=".item-title" />
</Subnavbar>
</Navbar>
<List strongIos outlineIos dividersIos class="searchbar-not-found">
<ListItem title="Nothing found" />
</List>
<List strongIos outlineIos dividersIos class="search-list searchbar-found">
<ListItem title="Acura" />
<ListItem title="Audi" />
<ListItem title="BMW" />
<ListItem title="Cadillac " />
<ListItem title="Chevrolet " />
<ListItem title="Chrysler " />
<ListItem title="Dodge " />
<ListItem title="Ferrari " />
<ListItem title="Ford " />
<ListItem title="GMC " />
<ListItem title="Honda" />
<ListItem title="Hummer" />
<ListItem title="Hyundai" />
<ListItem title="Infiniti " />
<ListItem title="Isuzu " />
<ListItem title="Jaguar " />
<ListItem title="Jeep " />
<ListItem title="Kia" />
<ListItem title="Lamborghini " />
<ListItem title="Land Rover" />
<ListItem title="Lexus " />
<ListItem title="Lincoln " />
<ListItem title="Lotus " />
<ListItem title="Mazda" />
<ListItem title="Mercedes-Benz" />
<ListItem title="Mercury " />
<ListItem title="Mitsubishi" />
<ListItem title="Nissan " />
<ListItem title="Oldsmobile " />
<ListItem title="Peugeot " />
<ListItem title="Pontiac " />
<ListItem title="Porsche" />
<ListItem title="Regal" />
<ListItem title="Saab " />
<ListItem title="Saturn " />
<ListItem title="Subaru " />
<ListItem title="Suzuki " />
<ListItem title="Toyota" />
<ListItem title="Volkswagen" />
<ListItem title="Volvo" />
</List>
</Page>
可扩展搜索栏
searchbar-expandable.svelte
<script>
import { Navbar, Page, Searchbar, List, ListItem, Link, NavRight } from 'framework7-svelte';
</script>
<Page>
<Navbar title="Searchbar">
<NavRight>
<Link searchbarEnable=".searchbar-demo" iconIos="f7:search" iconMd="material:search" />
</NavRight>
<Searchbar
class="searchbar-demo"
expandable
searchContainer=".search-list"
searchIn=".item-title"
/>
</Navbar>
<List strongIos outlineIos dividersIos class="searchbar-not-found">
<ListItem title="Nothing found" />
</List>
<List strongIos outlineIos dividersIos class="search-list searchbar-found">
<ListItem title="Acura" />
<ListItem title="Audi" />
<ListItem title="BMW" />
<ListItem title="Cadillac " />
<ListItem title="Chevrolet " />
<ListItem title="Chrysler " />
<ListItem title="Dodge " />
<ListItem title="Ferrari " />
<ListItem title="Ford " />
<ListItem title="GMC " />
<ListItem title="Honda" />
<ListItem title="Hummer" />
<ListItem title="Hyundai" />
<ListItem title="Infiniti " />
<ListItem title="Isuzu " />
<ListItem title="Jaguar " />
<ListItem title="Jeep " />
<ListItem title="Kia" />
<ListItem title="Lamborghini " />
<ListItem title="Land Rover" />
<ListItem title="Lexus " />
<ListItem title="Lincoln " />
<ListItem title="Lotus " />
<ListItem title="Mazda" />
<ListItem title="Mercedes-Benz" />
<ListItem title="Mercury " />
<ListItem title="Mitsubishi" />
<ListItem title="Nissan " />
<ListItem title="Oldsmobile " />
<ListItem title="Peugeot " />
<ListItem title="Pontiac " />
<ListItem title="Porsche" />
<ListItem title="Regal" />
<ListItem title="Saab " />
<ListItem title="Saturn " />
<ListItem title="Subaru " />
<ListItem title="Suzuki " />
<ListItem title="Toyota" />
<ListItem title="Volkswagen" />
<ListItem title="Volvo" />
</List>
</Page>