unduh react search input - unduh kode sumber react search input

react search input

Kode sumber lainnya

v0.2.8

Unduh

reaksi-pencarian-input

Komponen React sederhana untuk input pencarian, menyediakan fungsi filter.

Demo

Memasang

npm install react-search-input --save

Contoh

 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

Alat peraga

Semua alat peraga bersifat opsional. Semua props lainnya akan diteruskan ke input DOM.

nama kelas

Kelas Komponen (selain search-input ).

di Perubahan

Fungsi dipanggil ketika istilah pencarian diubah (akan diteruskan sebagai argumen).

filterKeys

Entah [String] atau String . Akan digunakan oleh metode filter jika tidak ada argumen yang diteruskan di sana.

mencekik

Kurangi frekuensi panggilan ke fungsi onChange (dalam ms). Standarnya adalah 200 .

caseSensitif

Tentukan apakah penelusuran harus peka huruf besar-kecil. Standarnya false

kusut

Tentukan apakah pencarian harus kabur. Standarnya false

sortResults

Tentukan apakah hasil pencarian harus diurutkan berdasarkan relevansi (hanya berfungsi dengan pencarian fuzzy). Standarnya false

nilai

Tentukan nilai masukannya.

Metode

menyaring([tombol])

Mengembalikan fungsi yang dapat digunakan untuk memfilter array. keys bisa berupa String , [String] atau null .

Jika keys array adalah array, fungsi akan mengembalikan nilai true jika setidaknya salah satu kunci item cocok dengan istilah pencarian.

Metode Statis

filter(SearchTerm, [kunci], [{caseSensitive, fuzzy, sortResults}])

Mengembalikan fungsi yang dapat digunakan untuk memfilter array. searchTerm dapat berupa regex atau String . keys bisa berupa String , [String] atau null .

Jika keys array adalah array, fungsi akan mengembalikan nilai true jika setidaknya salah satu kunci item cocok dengan istilah pencarian.