react search input

entrada de pesquisa de reação

Componente React simples para uma entrada de pesquisa, fornecendo uma função de filtro.

Demonstração

Instalar

npm install react-search-input --save

Exemplo

 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

Adereços

Todos os adereços são opcionais. Todos os outros adereços serão passados ​​para a entrada do DOM.

nomedaclasse

Classe do Componente (além de search-input ).

onChange

Função chamada quando o termo de pesquisa é alterado (será passado como argumento).

chaves de filtro

Um [String] ou um String . Será usado pelo método filter se nenhum argumento for passado lá.

acelerador

Reduza a frequência de chamadas para a função onChange (em ms). O padrão é 200 .

maiúsculas e minúsculas

Defina se a pesquisa deve diferenciar maiúsculas de minúsculas. O padrão é false

difuso

Defina se a pesquisa deve ser difusa. O padrão é false

classificarResultados

Defina se os resultados da pesquisa devem ser ordenados por relevância (funciona apenas com pesquisa difusa). O padrão é false

valor

Defina o valor da entrada.

Métodos

filtro([chaves])

Retorna uma função que pode ser usada para filtrar um array. keys podem ser String , [String] ou null .

Se um array keys for um array, a função retornará verdadeiro se pelo menos uma das chaves do item corresponder ao termo de pesquisa.

Métodos estáticos

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

Retorna uma função que pode ser usada para filtrar um array. searchTerm pode ser uma regex ou uma String . keys podem ser String , [String] ou null .

Se um array keys for um array, a função retornará verdadeiro se pelo menos uma das chaves do item corresponder ao termo de pesquisa.

Estilos

Veja react-search-input.css para ter uma ideia de como estilizar este componente.

---

Licenciado pelo MIT