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

เอพีไอ

อุปกรณ์ประกอบฉาก

อุปกรณ์ประกอบฉากทั้งหมดเป็นทางเลือก อุปกรณ์ประกอบฉากอื่นๆ ทั้งหมดจะถูกส่งผ่านไปยังอินพุต DOM

ชื่อคลาส

คลาสของคอมโพเนนต์ (นอกเหนือจาก search-input )

เมื่อเปลี่ยน

ฟังก์ชั่นที่เรียกเมื่อคำค้นหามีการเปลี่ยนแปลง (จะถูกส่งผ่านเป็นอาร์กิวเมนต์)

ตัวกรองคีย์

ไม่ว่าจะเป็น [String] หรือ String จะถูกใช้โดยวิธี filter หากไม่มีการส่งผ่านอาร์กิวเมนต์ที่นั่น

เค้น

ลดความถี่ในการโทรไปยังฟังก์ชัน onChange (เป็นมิลลิวินาที) ค่าเริ่มต้นคือ 200

caseSensitive

กำหนดว่าการค้นหาควรคำนึงถึงขนาดตัวพิมพ์หรือไม่ ค่าเริ่มต้นเป็น false

คลุมเครือ

กำหนดว่าการค้นหาควรจะคลุมเครือหรือไม่ ค่าเริ่มต้นเป็น false

เรียงลำดับผลลัพธ์

กำหนดว่าควรเรียงลำดับผลการค้นหาตามความเกี่ยวข้องหรือไม่ (ใช้ได้กับการค้นหาแบบคลุมเครือเท่านั้น) ค่าเริ่มต้นเป็น false

ค่า

กำหนดค่าของอินพุต

วิธีการ

ตัวกรอง ([คีย์])

ส่งกลับฟังก์ชันที่สามารถใช้เพื่อกรองอาร์เรย์ keys สามารถเป็น String , [String] หรือ null

หาก keys อาร์เรย์เป็นอาร์เรย์ ฟังก์ชันจะส่งคืนค่าเป็นจริงหากมีคีย์อย่างน้อยหนึ่งคีย์ของรายการตรงกับคำค้นหา

วิธีการแบบคงที่

ตัวกรอง (searchTerm, [keys], [{caseSensitive, fuzzy, sortResults}])

ส่งกลับฟังก์ชันที่สามารถใช้เพื่อกรองอาร์เรย์ searchTerm อาจเป็น regex หรือ String keys สามารถเป็น String , [String] หรือ null

หาก keys อาร์เรย์เป็นอาร์เรย์ ฟังก์ชันจะส่งกลับค่าจริงหากมีอย่างน้อยหนึ่งคีย์ของรายการตรงกับคำค้นหา

สไตล์

ดูที่ react-search-input.css เพื่อดูแนวคิดเกี่ยวกับวิธีจัดสไตล์ส่วนประกอบนี้

---

เอ็มไอทีได้รับใบอนุญาต