svelte typeahead Download - svelte typeahead Quellcode herunterladen

svelte typeahead

Anderer Quellcode

v4.4.2

Herunterladen

svelte-typeahead

Zugängliche Typeahead-Komponente für die Fuzzy-Suche.

Diese Komponente nutzt die leichtgewichtige Fuzzy-Bibliothek für die clientseitige Fuzzy-Suche und folgt den WAI-ARIA-Richtlinien.

Probieren Sie es im Svelte REPL aus.

Installation

 # npm
npm i svelte-typeahead

# pnpm
pnpm i svelte-typeahead

# Yarn
yarn add svelte-typeahead

# Bun
bun add svelte-typeahead

Verwendung

Basic

Übergeben Sie ein Array von Objekten an die data . Verwenden Sie die extract Requisite, um den Wert anzugeben, nach dem gesucht werden soll.

< script >
  import Typeahead from " svelte-typeahead " ;

  const data = [
    { state : " California " },
    { state : " North Carolina " },
    { state : " North Dakota " },
    { state : " South Carolina " },
    { state : " South Dakota " },
    { state : " Michigan " },
    { state : " Tennessee " },
    { state : " Nevada " },
    { state : " New Hampshire " },
    { state : " New Jersey " },
  ];

  const extract = ( item ) => item . state ;
</ script >

< Typeahead { data } { extract } />

Benutzerdefiniertes Etikett

$$restProps werden an svelte-search weitergeleitet.

Verwenden Sie die label Requisite, um ein benutzerdefiniertes Label anzugeben.

< Typeahead label = "U.S. States" { data } { extract } />

Verstecktes Etikett

Setzen Sie hideLabel auf true um die Beschriftung optisch auszublenden.

Es wird empfohlen, die label – auch wenn sie ausgeblendet ist – für die Barrierefreiheit festzulegen.

< Typeahead label = "U.S. States" hideLabel { data } { extract } />

Benutzerdefinierte Ergebnisse

Diese Komponente verwendet die Fuzzy-Bibliothek, um übereinstimmende Zeichen mit dem Markierungselement hervorzuheben.

Verwenden Sie den Standard-Slot, um benutzerdefinierte Ergebnisse zu rendern.

< Typeahead { data } { extract } let:result let:index >
  < strong >{ @html result . string }</ strong >
  { index }
</ Typeahead >

Keine Ergebnisse

Verwenden Sie den Slot „Keine Ergebnisse“, um eine Nachricht anzuzeigen, wenn der Suchwert keine Ergebnisse liefert.

< Typeahead value = "abcd" { data } { extract } let:value >
  < svelte:fragment slot = " no-results " >
    No results found for "{ value }"
  </ svelte:fragment >
</ Typeahead >

Begrenzen Sie die Anzahl der Ergebnisse

Verwenden Sie die limit Requisite, um die maximale Anzahl der anzuzeigenden Ergebnisse anzugeben. Der Standardwert ist Infinity .

< Typeahead limit ={ 2 } { data } { extract } />

Deaktivierte Artikel

Deaktivieren Sie Elemente mithilfe des disable . Deaktivierte Elemente können nicht über die Tastatur ausgewählt oder navigiert werden.

Im folgenden Beispiel werden Elemente mit einem state , der „Carolina“ enthält, deaktiviert.

< Typeahead
  { data }
  value = " ca "
  extract ={( item ) => item . state }
  disable ={( item ) => / Carolina / . test ( item . state )}
/>

Fokus nach Auswahl

Setzen Sie focusAfterSelect auf true , um die Sucheingabe nach der Auswahl eines Ergebnisses neu zu fokussieren.

< Typeahead focusAfterSelect { data } { extract } />

Dropdown-Liste beim Fokus anzeigen

Standardmäßig wird das Dropdown-Menü angezeigt, wenn für den value Ergebnisse vorliegen.

Setzen Sie showDropdownOnFocus auf true , um das Dropdown nur anzuzeigen, wenn die Sucheingabe fokussiert ist.

< Typeahead value = "ca" showDropdownOnFocus { data } { extract } />

Alle Ergebnisse zum Fokus anzeigen

Standardmäßig werden keine Ergebnisse angezeigt, wenn eine leere Eingabe (z. B. value="" ) fokussiert ist.

Setzen Sie showAllResultsOnFocus auf true , damit alle Ergebnisse angezeigt werden, wenn eine leere Eingabe fokussiert ist.

< Typeahead showAllResultsOnFocus { data } { extract } />

Styling

Hinweis: Diese Komponente ist vom Design her minimalistisch gestaltet. Sie können die Komponente mithilfe des Selektors [data-svelte-typeahead] als Ziel festlegen.

 : global ([ data-svelte-typeahead ]) {
  margin : 1 rem ;
}

API

Requisiten

Name	Typ	Standardwert	Beschreibung
Wert	`string`	`""`	Geben Sie den Suchwert ein.
Daten	`TItem[]`	`[]`	Zu durchsuchende Elemente.
Extrakt	`(TItem) => any`	`(item) => item`	Zielen Sie auf den Wert, wenn `TItem` ein Objekt ist.
deaktivieren	`(TItem) => boolean`	`(item) => false`	Deaktivierte Elemente werden in den Ergebnissen angezeigt, sind jedoch nicht auswählbar.
Filter	`(TItem) => boolean`	`(item) => false`	Ausgefilterte Elemente werden nicht in den Ergebnissen angezeigt.
automatische Auswahl	`boolean`	`true`	Ob das erste Ergebnis automatisch ausgewählt werden soll.
inputAfterSelect	`"update" \| "clear" \| "keep"`	`"update"`	Auf `"clear"` setzen, um den `value` nach der Auswahl eines Ergebnisses zu löschen. Auf `"keep"` einstellen, um das Suchfeld nach einer Auswahl unverändert zu lassen.
Ergebnisse	`FuzzyResult[]`	`[]`	Rohe Fuzzy-Ergebnisse aus dem Fuzzy-Modul
focusAfterSelect	`boolean`	`false`	Auf `true` setzen, um die Eingabe nach der Auswahl eines Ergebnisses neu zu fokussieren.
showDropdownOnFocus	`boolean`	`false`	Auf `true` setzen, um nur Ergebnisse anzuzeigen, wenn die Eingabe fokussiert ist.
showAllResultsOnFocus	`boolean`	`false`	Auf `true` setzen, damit alle Ergebnisse angezeigt werden, wenn eine leere Eingabe fokussiert ist.
Limit	`number`	`Infinity`	Geben Sie die maximale Anzahl der anzuzeigenden Ergebnisse an.
`...$$restProps`	(weitergeleitet an `svelte-search` )	N / A	Alle anderen Requisiten werden an das Eingabeelement weitergeleitet.

Gesendete Ereignisse

on:select : wird bei der Auswahl eines Ergebnisses ausgelöst
on:clear : Wird beim Löschen des Eingabefelds ausgelöst

< script >
  import Typeahead from " svelte-typeahead " ;

  let e = [];
</ script >

< Typeahead
  { data }
  { extract }
  on:select ={({ detail }) => ( e = [ ... e , { event: " select " , detail }])}
  on:clear ={() => ( e = [ ... e , { event: " clear " }])}
/>

< pre >{ JSON . stringify ( e , null , 2 )}</ pre >