贊助商成為贊助商

Searchbar React 組件

Searchbar React 組件代表 Framework7 的 Searchbar 組件。

Searchbar 組件

包含以下元件

搜尋列屬性

你可以將所有參數傳遞到單一 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)當搜尋列輸入元素發生「變更」事件時，會觸發事件
input(event)當搜尋列輸入元素發生「輸入」事件時，會觸發事件
focus(event)當搜尋列輸入元素發生「焦點」事件時，會觸發事件
blur(event)當搜尋列輸入元素發生「模糊」事件時，會觸發事件
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>
  );
};
改善此文件
在此頁面