react search input

Reagieren-Sucheingabe

Einfache React-Komponente für eine Sucheingabe, die eine Filterfunktion bereitstellt.

Demo

Installieren

npm install react-search-input --save

Beispiel

 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

Requisiten

Alle Requisiten sind optional. Alle anderen Requisiten werden an die DOM-Eingabe übergeben.

Klassenname

Klasse der Komponente (zusätzlich zu search-input ).

onChange

Funktion, die bei Änderung des Suchbegriffs aufgerufen wird (wird als Argument übergeben).

filterKeys

Entweder ein [String] oder ein String . Wird von der filter verwendet, wenn dort kein Argument übergeben wird.

Gaspedal

Reduzieren Sie die Aufrufhäufigkeit der onChange -Funktion (in ms). Der Standardwert ist 200 .

caseSensitive

Legen Sie fest, ob bei der Suche die Groß-/Kleinschreibung beachtet werden soll. Der Standardwert ist false

verschwommen

Legen Sie fest, ob die Suche unscharf sein soll. Der Standardwert ist false

sortResults

Legen Sie fest, ob Suchergebnisse nach Relevanz sortiert werden sollen (funktioniert nur mit Fuzzy-Suche). Der Standardwert ist false

Wert

Definieren Sie den Wert der Eingabe.

Methoden

filter([Schlüssel])

Gibt eine Funktion zurück, die zum Filtern eines Arrays verwendet werden kann. keys können String , [String] oder null sein.

Wenn es sich bei einem Array keys um ein Array handelt, gibt die Funktion „true“ zurück, wenn mindestens einer der Schlüssel des Elements mit dem Suchbegriff übereinstimmt.

Statische Methoden

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

Gibt eine Funktion zurück, die zum Filtern eines Arrays verwendet werden kann. searchTerm kann ein regex oder ein String sein. keys können String , [String] oder null sein.

Wenn es sich bei einem Array keys um ein Array handelt, gibt die Funktion „true“ zurück, wenn mindestens einer der Schlüssel des Elements mit dem Suchbegriff übereinstimmt.

Stile

Sehen Sie sich „react-search-input.css“ an, um eine Idee zum Gestalten dieser Komponente zu erhalten.

---

MIT-Lizenz