検索バー React コンポーネント

検索バー React コンポーネントは、Framework7 の検索バーコンポーネントを表します。

検索バーコンポーネント

以下のコンポーネントが含まれています

検索バー

検索バーのプロパティ

すべてのパラメータを単一のparamsプロパティで渡すか、コンポーネント属性を介して指定するために各パラメータに個別のpropsを使用できます。

Prop	型	デフォルト	説明
`<Searchbar>`プロパティ
init	boolean	true	検索バーを初期化します
value	string number		検索バー入力の値を指定できます。`customSearch`が有効になっている場合に使用すると便利です
form	boolean	true	メインの検索バー要素が`div`の代わりに`form`タグとして使用されます
placeholder	string	「検索」	入力プレースホルダーテキスト
disableButton	boolean	true	無効ボタンを有効にします
disableButtonText	string	キャンセル	無効ボタンのテキスト
clearButton	boolean	true	検索バー入力のクリアボタンを有効にします
expandable	boolean	false	拡張可能な検索バーを有効にします
inline	boolean	false	インライン検索バーを有効にします
spellcheck	boolean		入力要素に`spellcheck`属性を設定します
searchContainer	string object		検索するリストブロックのCSSセレクターまたはHTML要素
searchIn	string	.item-title	検索する必要があるリストビュー要素のフィールドのCSSセレクター。通常、要素のタイトル（'.item-title'）を検索します。`'.item-title, .item-text'`のように、検索する要素を複数渡すこともできます
searchItem	string	li	単一の検索項目のCSSセレクター。リストビューで検索を行う場合、単一のリスト要素`li`である必要があります
searchGroup	string	.list-group	グループ要素のCSSセレクター。`hideGroups`が有効になっている場合にグループを非表示にするために使用されます。リストビューで検索を行う場合、通常はリストグループです
searchGroupTitle	string	.list-group-title	グループタイトルのCSSセレクター。`hideGroupTitles`が有効になっている場合にグループタイトルを非表示にするために使用されます。リストビューで検索を行う場合、通常はリストグループタイトルです
foundEl	string object	.searchbar-found	検索バーの「found」要素のCSSセレクターまたはHTMLElement。指定されていない場合、検索バーはページ上で`.searchbar-found`要素を探します
notFoundEl	string object	.searchbar-not-found	検索バーの「not-found」要素のCSSセレクターまたはHTMLElement。指定されていない場合、検索バーはページ上で`.searchbar-not-found`要素を探します
backdrop	boolean		検索バーの背景要素を有効にします。デフォルトでは、インライン検索バーでは無効になっています
backdropEl	string object		検索バーの背景要素のCSSセレクターまたはHTMLElement。渡されず、`backdrop`パラメータがtrueの場合、`.searchbar-backdrop`要素を探します。見つからない場合は、自動的に作成されます
ignore	string	.searchbar-ignore	検索バーで無視され、常に検索結果に表示される項目のCSSセレクター
customSearch	boolean	false	有効にすると、検索バーは`search-container`で指定されたリストブロックを検索せず、たとえば検索結果で外部APIを呼び出して手動で表示するなど、カスタム検索機能を使用できます
removeDiacritics	boolean	false	検索中にダイアクリティカルマーク（á、í、óなど）を削除/置換することを有効にします
hideGroupTitles	boolean	true	有効にすると、検索はグループタイトルを考慮し、その直後に見つかったアイテムがない場合は非表示にします
hideGroups	boolean	true	有効にすると、検索はリストビューグループを考慮し、これらのグループ内に見つかったアイテムがない場合は非表示にします
outline	boolean	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コンポーネントには、カスタム要素用の追加スロットがあります

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>
  );
};

このドキュメントを改善する

このページについて

検索バーコンポーネント
検索バーのプロパティ
検索バーメソッド
検索バーイベント
検索バースロット
例