react search input

réagir-recherche-entrée

Composant React simple pour une entrée de recherche, fournissant une fonction de filtre.

Démo

Installer

npm install react-search-input --save

Exemple

 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

Accessoires

Tous les accessoires sont facultatifs. Tous les autres accessoires seront transmis à l'entrée DOM.

Nom de classe

Classe du composant (en plus de search-input ).

surChange

Fonction appelée lorsque le terme de recherche est modifié (sera passé en argument).

Filtrer les clés

Soit un [String] soit un String . Sera utilisé par la méthode filter si aucun argument n'y est passé.

étrangler

Réduisez la fréquence d'appel à la fonction onChange (en ms). La valeur par défaut est 200 .

sensible aux majuscules et minuscules

Définissez si la recherche doit être sensible à la casse. La valeur par défaut est false

flou

Définissez si la recherche doit être floue. La valeur par défaut est false

trierRésultats

Définissez si les résultats de la recherche doivent être triés par pertinence (fonctionne uniquement avec la recherche floue). La valeur par défaut est false

valeur

Définissez la valeur de l'entrée.

Méthodes

filtre([touches])

Renvoie une fonction qui peut être utilisée pour filtrer un tableau. keys peuvent être String , [String] ou null .

Si un tableau keys est un tableau, la fonction retournera vrai si au moins une des clés de l'élément correspond au terme recherché.

Méthodes statiques

filtre (terme de recherche, [clés], [{caseSensitive, fuzzy, sortResults}])

Renvoie une fonction qui peut être utilisée pour filtrer un tableau. searchTerm peut être une regex ou une String . keys peuvent être String , [String] ou null .

Si un tableau keys est un tableau, la fonction retournera vrai si au moins une des clés de l'élément correspond au terme recherché.

Styles

Regardez react-search-input.css pour une idée sur la façon de styliser ce composant.

---

Licence MIT