react search input تحميل - react search input تنزيل كود المصدر

react search input

شفرة المصدر الأخرى

v0.2.8

تنزيل

رد فعل البحث المدخلات

مكون 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 ).

onChange

يتم استدعاء الوظيفة عند تغيير مصطلح البحث (سيتم تمريرها كوسيطة).

filterKeys

إما [String] أو String . سيتم استخدامه بواسطة طريقة filter إذا لم يتم تمرير أي وسيطة هناك.

خنق

تقليل تكرار الاتصال بوظيفة onChange (بالمللي ثانية). الافتراضي هو 200 .

حساسية الموضوع

حدد ما إذا كان البحث يجب أن يكون حساسًا لحالة الأحرف. الافتراضي false

غامض

حدد ما إذا كان البحث يجب أن يكون غامضًا. الافتراضي false

SortResults

حدد ما إذا كان يجب فرز نتائج البحث حسب مدى صلتها بالموضوع (يعمل فقط مع البحث الغامض). الافتراضي false

قيمة

تحديد قيمة الإدخال.

طُرق

مرشح ([مفاتيح])

قم بإرجاع دالة يمكن استخدامها لتصفية مصفوفة. يمكن أن تكون keys String أو [String] أو null .

إذا كانت keys المصفوفة عبارة عن مصفوفة، فسترجع الدالة صحيحًا إذا كان أحد مفاتيح العنصر على الأقل يطابق مصطلح البحث.

الأساليب الثابتة

مرشح (searchTerm، [مفاتيح]، [{caseSensitive، Fuzzy،sortResults}])

قم بإرجاع دالة يمكن استخدامها لتصفية مصفوفة. يمكن أن يكون searchTerm عبارة عن regex أو String . يمكن أن تكون keys String أو [String] أو null .

إذا كانت keys المصفوفة عبارة عن مصفوفة، فسترجع الدالة صحيحًا إذا كان أحد مفاتيح العنصر على الأقل يطابق مصطلح البحث.