react search input

反応検索入力

フィルター機能を提供する、検索入力用のシンプルな React コンポーネント。

デモ

インストール

npm install react-search-input --save

例

 import React , { Component } from 'react'
import SearchInput , { createFilter } from 'react-search-input'

import emails from './mails'

const KEYS_TO_FILTERS = [ 'user.name' , 'subject' , 'dest.name' ]

class App extends Component {
  constructor ( props ) {
    super ( props )
    this . state = {
      searchTerm : ''
    }
    this . searchUpdated = this . searchUpdated . bind ( this )
  }

  render ( ) {
    const filteredEmails = emails . filter ( createFilter ( this . state . searchTerm , KEYS_TO_FILTERS ) )

    return (
      < div >
        < SearchInput className = "search-input" onChange = { this . searchUpdated } / >
        { filteredEmails . map ( email => {
          return (
            < div className = "mail" key = { email . id } >
              < div className = "from" > { email . user . name } < / div >
              < div className = "subject" > { email . subject } < / div >
            < / div >
          )
        } ) }
      < / div >
    )
  }

  searchUpdated ( term ) {
    this . setState ( { searchTerm : term } )
  }
} 

API

小道具

すべての小道具はオプションです。他のすべてのプロパティは DOM 入力に渡されます。

クラス名

コンポーネントのクラス ( search-inputに加えて)。

onChange

検索語が変更されたときに呼び出される関数 (引数として渡されます)。

フィルターキー

[String]またはStringいずれか。引数が渡されない場合、 filterメソッドによって使用されます。

スロットル

onChange関数の呼び出し頻度を減らします (ミリ秒単位)。デフォルトは200です。

大文字と小文字を区別

検索で大文字と小文字を区別するかどうかを定義します。デフォルトはfalseです

ファジー

あいまい検索を行うかどうかを定義します。デフォルトはfalse

ソート結果

検索結果を関連性によって並べ替える必要があるかどうかを定義します (あいまい検索でのみ機能します)。デフォルトはfalse

価値

入力の値を定義します。

メソッド

フィルター([キー])

配列をフィルタリングするために使用できる関数を返します。 keys String 、 [String]またはnullを指定できます。

配列keysが配列の場合、項目のキーの少なくとも 1 つが検索語に一致すると、この関数は true を返します。

静的メソッド

filter(searchTerm, [keys], [{caseSensitive, fuzzy, sortResults}])

配列をフィルタリングするために使用できる関数を返します。 searchTerm regexまたはStringを指定できます。 keys String 、 [String]またはnullを指定できます。

配列keysが配列の場合、項目のキーの少なくとも 1 つが検索語に一致すると、この関数は true を返します。

スタイル

このコンポーネントのスタイルを設定する方法については、react-search-input.css を参照してください。

---

MITライセンス取得済み