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

API

Реквизит

Весь реквизит не является обязательным. Все остальные реквизиты будут переданы на вход DOM.

имя класса

Класс компонента (помимо search-input ).

onChange

Функция, вызываемая при изменении условия поиска (будет передана в качестве аргумента).

фильтрКлавиши

Либо [String] либо String . Будет использоваться методом filter , если ему не передан аргумент.

дроссель

Уменьшите частоту обращения к функции onChange (в мс). По умолчанию — 200 .

с учетом регистра

Определите, должен ли поиск быть чувствительным к регистру. По умолчанию — false

нечеткий

Определите, должен ли поиск быть нечетким. По умолчанию — false

сортировкаРезультаты

Определите, должны ли результаты поиска сортироваться по релевантности (работает только при нечетком поиске). По умолчанию — false

ценить

Определите значение входа.

Методы

фильтр([ключи])

Возвращает функцию, которую можно использовать для фильтрации массива. keys могут быть String , [String] или null .

Если keys массива являются массивом, функция вернет true, если хотя бы один из ключей элемента соответствует искомому критерию.

Статические методы

filter(searchTerm, [ключи], [{caseSensitive, fuzzy, sortResults}])

Возвращает функцию, которую можно использовать для фильтрации массива. searchTerm может быть regex или String . keys могут быть String , [String] или null .

Если keys массива являются массивом, функция вернет true, если хотя бы один из ключей элемента соответствует искомому критерию.

Стили

Посмотрите на response-search-input.css, чтобы узнать, как стилизовать этот компонент.

---

Лицензия MIT