react search input

reaccionar-buscar-entrada

Componente React simple para una entrada de búsqueda, que proporciona una función de filtro.

Manifestación

Instalar

npm install react-search-input --save

Ejemplo

 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

Accesorios

Todos los accesorios son opcionales. Todos los demás accesorios se pasarán a la entrada DOM.

nombre de clase

Clase del componente (además de la search-input ).

en cambio

Función llamada cuando se cambia el término de búsqueda (se pasará como argumento).

claves de filtro

Ya sea un [String] o un String . Será utilizado por el método filter si no se pasa ningún argumento allí.

acelerador

Reduzca la frecuencia de llamadas a la función onChange (en ms). El valor predeterminado es 200 .

distingue mayúsculas y minúsculas

Defina si la búsqueda debe distinguir entre mayúsculas y minúsculas. El valor predeterminado es false

difuso

Defina si la búsqueda debe ser difusa. El valor predeterminado es false

ordenarResultados

Defina si los resultados de la búsqueda deben ordenarse por relevancia (solo funciona con búsqueda difusa). El valor predeterminado es false

valor

Defina el valor de la entrada.

Métodos

filtrar([claves])

Devuelve una función que se puede utilizar para filtrar una matriz. keys pueden ser String , [String] o null .

Si una matriz de keys es una matriz, la función devolverá verdadero si al menos una de las claves del elemento coincide con el término de búsqueda.

Métodos estáticos

filtro (término de búsqueda, [claves], [{caseSensitive, fuzzy, sortResults}])

Devuelve una función que se puede utilizar para filtrar una matriz. searchTerm puede ser una regex o una String . keys pueden ser String , [String] o null .

Si una matriz de keys es una matriz, la función devolverá verdadero si al menos una de las claves del elemento coincide con el término de búsqueda.

Estilos

Mire reaccionar-search-input.css para obtener una idea sobre cómo diseñar este componente.

---

Licencia MIT