- 开始使用
- Svelte 组件
搜索栏 Svelte 组件
搜索栏 Svelte 组件代表 Framework7 的搜索栏组件。
搜索栏组件
包含以下组件：
Searchbar
搜索栏属性
您可以在单个属性中传递所有参数params或使用单独的 props 为每个参数指定它们通过组件属性：
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
| <Searchbar> 属性 | |||
| init | 布尔值 | true | 初始化搜索栏 |
| 值 | 字符串 数字 | 允许指定搜索栏输入的值。当启用时很有用customSearch启用 | |
| form | 布尔值 | true | 主搜索栏元素将用作form标签而不是div |
| 占位符 | 字符串 | "搜索" | 输入占位符文本 |
| 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元素 |
| 背景遮罩 | 布尔值 | 启用搜索栏背景元素。默认情况下，对于内联搜索栏禁用 | |
| 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()组件的方法来访问初始化的Sheet Modal实例。例如：
<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>
