react minisearch تحميل - react minisearch تحميل كود المصدر

react minisearch

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

1.0.0

تنزيل

رد فعل MiniSearch

تكامل React لمكتبة البحث عن النص الكامل من جانب عميل MiniSearch.

ابدء

تثبيت:

أولاً، تأكد من تثبيت إصدار متوافق من React وMiniSearch.

ثم قم بالتثبيت عبر NPM أو Yarn :

 # With NPM:
npm install react-minisearch

# Or with Yarn:
yarn add react-minisearch

الاستخدام:

هناك ثلاث طرق رئيسية لاستخدام react-minisearch : ربط useMiniSearch ، أو مكون withMiniSearch ذو الترتيب الأعلى، أو مكون غلاف WithMiniSearch .

تأخذ جميع الطرق الثلاثة الوسائط التالية (أو الدعائم الخاصة بمكون الغلاف):

المجموعة الأولية من المستندات المراد إضافتها إلى الفهرس. ملاحظة: هذه مجرد المجموعة الأولية، ولن يؤدي تغيير هذه الوسيطة إلى إعادة الفهرسة. لإضافة المستندات أو إزالتها بعد التهيئة، استخدم الوظائف add / addAll / remove / removeAll / discard ، وما إلى ذلك.
خيارات تكوين MiniSearch

باستخدام الخطاف useMiniSearch:

 import { useMiniSearch } from 'react-minisearch'

// Documents to search amongst
const documents = [
  { id : 1 , name : 'Agata' } ,
  { id : 2 , name : 'Finn' } ,
  // …etc
]

// See MiniSearch for documentation on options
const miniSearchOptions = { fields : [ 'name' ] }

const MyComponent = ( ) => {
  const { search , searchResults } = useMiniSearch ( documents , miniSearchOptions )

  const handleSearchChange = ( event ) => {
    search ( event . target . value )
  }

  return (
    < div >
      < input type = 'text' onChange = { handleSearchChange } placeholder = 'Search…' / >

      < ol >
        < h3 > Results: < / h3 >
        {
          searchResults && searchResults . map ( ( result , i ) => {
            return < li key = { i } > { result . name } < / li >
          } )
        }
      < / ol >
    < / div >
  )
}

باستخدام مكون withMiniSearch ذو الترتيب الأعلى:

 import { withMiniSearch } from 'react-minisearch'

const MyComponent = ( { search , searchResults } ) => {

  const handleSearchChange = ( event ) => {
    search ( event . target . value )
  }

  return (
    < div >
      < input type = 'text' onChange = { handleSearchChange } placeholder = 'Search…' / >

      < ol >
        < h3 > Results: < / h3 >
        {
          searchResults && searchResults . map ( ( result , i ) => {
            return < li key = { i } > { result . name } < / li >
          } )
        }
      < / ol >
    < / div >
  )
}

// Documents to search amongst
const documents = [
  { id : 1 , name : 'Agata' } ,
  { id : 2 , name : 'Finn' } ,
  // …etc
]

// See MiniSearch for documentation on options
const miniSearchOptions = { fields : [ 'name' ] }

const MyComponentWithSearch = withMiniSearch ( documents , miniSearchOptions , MyComponent )

باستخدام مكون المجمع WithMiniSearch:

 import { WithMiniSearch } from 'react-minisearch'

// Documents to search amongst
const documents = [
  { id : 1 , name : 'Agata' } ,
  { id : 2 , name : 'Finn' } ,
  // …etc
]

// See MiniSearch for documentation on options
const miniSearchOptions = { fields : [ 'name' ] }

const MyComponent = ( ) => (
  < WithMiniSearch documents = { documents } options = { miniSearchOptions } >
    {
      ( { search , searchResults } ) => {
        const handleSearchChange = ( event ) => {
          search ( event . target . value )
        }

        return (
          < div >
            < input type = 'text' onChange = { handleSearchChange } placeholder = 'Search…' / >

            < ol >
              < h3 > Results: < / h3 >
              {
                searchResults && searchResults . map ( ( result , i ) => {
                  return < li key = { i } > { result . name } < / li >
                } )
              }
            < / ol >
          < / div >
        )
      }
    }
  < / WithMiniSearch >
)

الدعائم المقدمة:

المجموعة الكاملة للدعائم التي يوفرها react-minisearch هي نفسها لجميع الطرق الثلاث ( useMiniSearch أو withMiniSearch أو WithMiniSearch ):

search(query: string, searchOptions?: SearchOptions) => void : الوظيفة التي سيتم استدعاؤها لإجراء البحث
searchResults: T[] | null : مجموعة من نتائج البحث، أو null عند عدم إجراء أي بحث أو مسح البحث
rawResults: SearchResult[] | null : مجموعة من نتائج البحث الأولية من MiniSearch، بما في ذلك النتائج ومعلومات المطابقة، أو null عند عدم إجراء أي بحث أو مسح البحث
clearSearch() => void : الوظيفة التي سيتم استدعاؤها لمسح البحث (ضبط searchResults على null )
autoSuggest(query: string, searchOptions?: SearchOptions) => void : الوظيفة التي سيتم استدعاؤها للحصول على اقتراحات تلقائية
suggestions: Suggestion[] | null : مجموعة من الاقتراحات التلقائية، أو null عندما لا يتم استخدام الاقتراحات التلقائية أو مسحها
clearSuggestions() => void : الوظيفة التي سيتم استدعاؤها لمسح الاقتراحات (ضبط suggestions على null )
add(document: T) => void : وظيفة إضافة مستند جديد إلى الفهرس
addAll(documents: T[]) => void : وظيفة لإضافة عدة مستندات جديدة إلى الفهرس بشكل مجمّع
addAllAsync(documents: T[], options?: object) => Promise<void> : مثل addAll ، ولكنه يعمل بشكل غير متزامن وعلى دفعات لتجنب حظر واجهة المستخدم
remove(document: T) => void : وظيفة إزالة مستند من الفهرس
removeById(id: any) => void : وظيفة إزالة مستند من الفهرس بواسطة معرفه
removeAll(documents?: T[]) => void : وظيفة إزالة عدة مستندات، أو جميع المستندات، من الفهرس
discard(id: any) => void : تجاهل المستند بمعرفه (مثل removeById )
discardAll(ids: readonly any[]) => void : تجاهل عدة مستندات مرة واحدة، حسب معرفها
replace(document: T) => void : استبدال مستند موجود بنسخة جديدة منه
isIndexing: boolean : يتم ضبطه على true عندما تكون الفهرسة عبر addAllAsync قيد التقدم، false بخلاف ذلك
miniSearch: MiniSearch : مثيل MiniSearch ، للحالات (النادرة) عندما يكون من الضروري استخدامه مباشرة