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

应用程序编程接口

道具

所有道具都是可选的。所有其他 props 将传递到 DOM 输入。

类名

组件的类（除了search-input之外）。

改变时

搜索词更改时调用的函数（将作为参数传递）。

过滤键

要么是[String]要么是String 。如果没有传递参数，将由filter方法使用。

风门

减少onChange函数的调用频率（以毫秒为单位）。默认值为200 。

区分大小写

定义搜索是否应区分大小写。默认为false

模糊

定义搜索是否应该模糊。默认为false

排序结果

定义搜索结果是否应按相关性排序（仅适用于模糊搜索）。默认为false

价值

定义输入的值。

方法

过滤器（[键]）

返回一个可用于过滤数组的函数。 keys可以是String 、 [String]或null 。

如果数组keys是数组，则如果该项目的至少一个键与搜索项匹配，则该函数将返回 true。

静态方法

过滤器（searchTerm，[键]，[{caseSensitive，模糊，sortResults}]）

返回一个可用于过滤数组的函数。 searchTerm可以是regex或String 。 keys可以是String 、 [String]或null 。

如果数组keys是数组，则如果该项目的至少一个键与搜索项匹配，则该函数将返回 true。

风格

查看react-search-input.css 了解如何设置此组件的样式。

---

麻省理工学院许可