react minisearch Download - react minisearch Quellcode herunterladen

react minisearch

Anderer Quellcode

1.0.0

Herunterladen

Reagieren Sie auf MiniSearch

React-Integration für die clientseitige Volltextsuchbibliothek von MiniSearch.

Erste Schritte

Installation:

Stellen Sie zunächst sicher, dass Sie eine kompatible Version von React und MiniSearch installiert haben.

Anschließend über NPM oder Yarn installieren:

 # With NPM:
npm install react-minisearch

# Or with Yarn:
yarn add react-minisearch

Verwendung:

Es gibt drei Hauptmethoden zur Verwendung react-minisearch : den useMiniSearch -Hook, die höherwertige withMiniSearch Komponente oder die WithMiniSearch Wrapper-Komponente.

Alle drei Wege nehmen die folgenden Argumente (oder Requisiten für die Wrapper-Komponente) an:

Die erste Sammlung von Dokumenten, die dem Index hinzugefügt werden sollen. Hinweis: Dies ist nur die erste Sammlung und eine Änderung dieses Arguments führt nicht zu einer Neuindizierung. Um Dokumente nach der Initialisierung hinzuzufügen oder zu entfernen, verwenden Sie die Funktionen add / addAll / remove / removeAll / discard usw.
Die MiniSearch Konfigurationsoptionen

Mit dem useMiniSearch-Hook:

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

Verwendung der höherwertigen withMiniSearch-Komponente:

 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 )

Verwenden der WithMiniSearch-Wrapper-Komponente:

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

Mitgelieferte Requisiten:

Der vollständige Satz von Requisiten, die von react-minisearch bereitgestellt werden, ist für alle drei Arten gleich ( useMiniSearch , withMiniSearch oder WithMiniSearch ):

search(query: string, searchOptions?: SearchOptions) => void : Funktion, die aufgerufen werden soll, um die Suche durchzuführen
searchResults: T[] | null : Array von Suchergebnissen oder null , wenn keine Suche durchgeführt wurde oder die Suche gelöscht wurde
rawResults: SearchResult[] | null : Array der Rohsuchergebnisse von MiniSearch, einschließlich Bewertungen und Übereinstimmungsinformationen, oder null , wenn keine Suche durchgeführt oder die Suche gelöscht wurde
clearSearch() => void : Funktion, die aufgerufen werden soll, um die Suche zu löschen ( searchResults auf null setzen)
autoSuggest(query: string, searchOptions?: SearchOptions) => void : aufzurufende Funktion, um automatische Vorschläge zu erhalten
suggestions: Suggestion[] | null : Array automatischer Vorschläge oder null , wenn automatische Vorschläge nicht verwendet oder gelöscht werden
clearSuggestions() => void : Funktion, die aufgerufen werden soll, um die Vorschläge zu löschen ( suggestions auf null setzen)
add(document: T) => void : Funktion zum Hinzufügen eines neuen Dokuments zum Index
addAll(documents: T[]) => void : Funktion zum gleichzeitigen Hinzufügen mehrerer neuer Dokumente zum Index
addAllAsync(documents: T[], options?: object) => Promise<void> : wie addAll , funktioniert aber asynchron und in Stapeln, um ein Blockieren der Benutzeroberfläche zu vermeiden
remove(document: T) => void : Funktion zum Entfernen eines Dokuments aus dem Index
removeById(id: any) => void : Funktion zum Entfernen eines Dokuments aus dem Index anhand seiner ID
removeAll(documents?: T[]) => void : Funktion zum Entfernen mehrerer Dokumente oder aller Dokumente aus dem Index
discard(id: any) => void : Verwirft ein Dokument anhand seiner ID (dasselbe wie removeById “).
discardAll(ids: readonly any[]) => void : Mehrere Dokumente auf einmal verwerfen, anhand ihrer ID
replace(document: T) => void : Ersetze ein vorhandenes Dokument durch eine neue Version davon
isIndexing: boolean : Wird auf true gesetzt, wenn die Indizierung über addAllAsync ausgeführt wird, andernfalls auf false
miniSearch: MiniSearch : die MiniSearch -Instanz für die (seltenen) Fälle, in denen es notwendig ist, sie direkt zu verwenden