unduh react minisearch - unduh kode sumber react minisearch

react minisearch

Kode sumber lainnya

1.0.0

Unduh

Bereaksi MiniSearch

Integrasi reaksi untuk perpustakaan pencarian teks lengkap sisi klien MiniSearch.

Memulai

Instalasi:

Pertama, pastikan Anda menginstal versi React dan MiniSearch yang kompatibel.

Kemudian, instal melalui NPM atau Yarn :

 # With NPM:
npm install react-minisearch

# Or with Yarn:
yarn add react-minisearch

Penggunaan:

Ada tiga cara utama untuk menggunakan react-minisearch : hook useMiniSearch , komponen tingkat tinggi withMiniSearch , atau komponen wrapper WithMiniSearch .

Ketiga cara tersebut mengambil argumen berikut (atau props untuk komponen wrapper):

Kumpulan dokumen awal untuk ditambahkan ke indeks. Catatan: ini hanyalah koleksi awal, dan mengubah argumen ini tidak akan menyebabkan pengindeksan ulang. Untuk menambah atau menghapus dokumen setelah inisialisasi, gunakan fungsi add / addAll / remove / removeAll / discard , dll.
Opsi konfigurasi MiniSearch

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

Menggunakan komponen tingkat tinggi 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 )

Menggunakan komponen pembungkus 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 >
)

Alat peraga yang disediakan:

Kumpulan lengkap props yang disediakan oleh react-minisearch sama untuk ketiga cara ( useMiniSearch , withMiniSearch , atau WithMiniSearch ):

search(query: string, searchOptions?: SearchOptions) => void : fungsi yang akan dipanggil untuk melakukan pencarian
searchResults: T[] | null : susunan hasil pencarian, atau null ketika tidak ada pencarian yang dilakukan atau pencarian telah dihapus
rawResults: SearchResult[] | null : rangkaian hasil pencarian mentah dari MiniSearch, termasuk skor dan informasi pertandingan, atau null ketika tidak ada pencarian yang dilakukan atau pencarian dihapus
clearSearch() => void : fungsi yang dipanggil untuk menghapus pencarian (mengatur searchResults ke null )
autoSuggest(query: string, searchOptions?: SearchOptions) => void : fungsi yang dipanggil untuk mendapatkan saran otomatis
suggestions: Suggestion[] | null : rangkaian saran otomatis, atau null ketika saran otomatis tidak digunakan atau dihapus
clearSuggestions() => void : fungsi yang akan dipanggil untuk menghapus saran (setel suggestions ke null )
add(document: T) => void : berfungsi untuk menambahkan dokumen baru pada indeks
addAll(documents: T[]) => void : berfungsi untuk menambahkan beberapa dokumen baru ke indeks secara massal
addAllAsync(documents: T[], options?: object) => Promise<void> : sama seperti addAll , tetapi bekerja secara asinkron dan dalam batch untuk menghindari pemblokiran UI
remove(document: T) => void : berfungsi untuk menghapus dokumen dari indeks
removeById(id: any) => void : berfungsi untuk menghapus dokumen dari indeks berdasarkan ID-nya
removeAll(documents?: T[]) => void : berfungsi untuk menghapus beberapa dokumen, atau semua dokumen, dari indeks
discard(id: any) => void : membuang dokumen berdasarkan ID-nya (sama seperti removeById )
discardAll(ids: readonly any[]) => void : membuang beberapa dokumen sekaligus, berdasarkan ID-nya
replace(document: T) => void : mengganti dokumen yang ada dengan versi baru
isIndexing: boolean : disetel ke true saat pengindeksan melalui addAllAsync sedang berlangsung, false jika tidak
miniSearch: MiniSearch : instance MiniSearch , untuk kasus (yang jarang terjadi) ketika diperlukan untuk menggunakannya secara langsung