搜索栏 React 组件

搜索栏 React 组件表示 Framework7 的搜索栏组件。

搜索栏组件

包括以下组件

搜索栏

搜索栏属性

你可以将所有参数传递到单个params属性中，或使用每个参数的单独属性通过组件属性来指定它们

属性	类型	默认值	描述
<Searchbar> 属性
init	布尔值	true	初始化搜索栏
value	字符串数字		允许指定搜索栏输入的值。当启用`customSearch`时很有用
form	布尔值	true	主搜索栏元素将用 `form` 标记代替 `div`
占位符	字符串	“搜索”	输入占位符文本
disableButton	布尔值	true	启用禁用按钮
disableButtonText	字符串	取消	禁用按钮文本
clearButton	布尔值	true	启用搜索栏输入清除按钮
expandable	布尔值	false	启用可展开搜索栏
inline	布尔值	false	启用内联搜索栏
spellcheck	布尔值		在输入元素上设置 `spellcheck` 属性
searchContainer	字符串 object		要搜索的列表块的 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	字符串 object	.searchbar-found	搜索栏“已找到”元素的 CSS 选择器或 HTMLElement。如果未指定，搜索栏将在页面上查找 `.searchbar-found` 元素
notFoundEl	字符串 object	.searchbar-not-found	搜索栏“未找到”元素的 CSS 选择器或 HTMLElement。如果未指定，搜索栏将在页面上查找 `.searchbar-not-found` 元素
backdrop	布尔值		启用搜索栏背景元素。对于内联搜索栏，默认为禁用
backdropEl	字符串 object		搜索栏背景元素的 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)	在搜索（搜索字段更改）期间将触发该事件。作为参数，事件将接收 searchbar 实例，搜索查询和上一个查询
searchbarClear	(searchbar，previousQuery)	当用户单击 Searchbar 输入“清除”按钮时，将触发该事件。作为参数，事件将接收 searchbar 实例和上一个查询
searchbarEnable	(searchbar)	当 Searchbar 变为可用时，将触发该事件
searchbarDisable	(searchbar)	当 Searchbar 变得不可用/停用时，将触发该事件
change	(event)	当在 searchbar 输入元素上发生“change”事件时，将触发该事件
input	(event)	当在 searchbar 输入元素上发生“input”事件时，将触发该事件
focus	(event)	当在 searchbar 输入元素上发生“focus”事件时，将触发该事件
blur	(event)	当在 searchbar 输入元素上发生“blur”事件时，将触发该事件
clickClear	(event)	当用户单击输入“清除”按钮时，将触发该事件
clickDisable	(event)	当用户单击 searchbar 禁用按钮时，将触发该事件

搜索栏插槽

Searchbar React 组件具有用于自定义元素的其他插槽

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}
></Searchbar>

{/* 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>

示例

常用搜索栏

searchbar.jsx

import React from 'react';
import { Navbar, Page, Searchbar, Subnavbar, List, ListItem } from 'framework7-react';

export default () => {
  return (
    <Page>
      <Navbar title="Searchbar">
        <Subnavbar inner={false}>
          <Searchbar searchContainer=".search-list" searchIn=".item-title" />
        </Subnavbar>
      </Navbar>
      <List strongIos outlineIos dividersIos className="searchbar-not-found">
        <ListItem title="Nothing found" />
      </List>
      <List strongIos outlineIos dividersIos className="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.jsx

import React from 'react';
import { Navbar, Page, Searchbar, List, ListItem, Link, NavRight } from 'framework7-react';

export default () => {
  return (
    <Page>
      <Navbar title="Searchbar">
        <NavRight>
          <Link searchbarEnable=".searchbar-demo" iconIos="f7:search" iconMd="material:search" />
        </NavRight>
        <Searchbar
          className="searchbar-demo"
          expandable
          searchContainer=".search-list"
          searchIn=".item-title"
        />
      </Navbar>
      <List strongIos outlineIos dividersIos className="searchbar-not-found">
        <ListItem title="Nothing found" />
      </List>
      <List strongIos outlineIos dividersIos className="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>
  );
};

改进本文档

在此页面上

搜索栏组件
搜索栏属性
搜索栏方法
搜索栏事件
搜索栏插槽
示例