搜索栏 React 组件

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

搜索栏组件

包含以下组件：

搜索栏属性

您可以在单个属性中传递所有参数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)当用户点击搜索栏禁用按钮时将触发事件

搜索栏插槽

搜索栏 React 组件有额外的插槽用于自定义元素：

无插槽：

<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>
  );
};
改进此文档
在本页上
无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗