svelte typeahead Télécharger - svelte typeahead Téléchargement du code source

svelte typeahead

Autre code source

v4.4.2

Télécharger

tête de frappe svelte

Composant de saisie anticipée de recherche floue et accessible.

Ce composant utilise la bibliothèque floue légère pour la recherche floue côté client et suit les directives WAI-ARIA.

Essayez-le dans le Svelte REPL.

Installation

 # npm
npm i svelte-typeahead

# pnpm
pnpm i svelte-typeahead

# Yarn
yarn add svelte-typeahead

# Bun
bun add svelte-typeahead

Usage

Basique

Transmettez un tableau d’objets à l’accessoire data . Utilisez la prop extract pour spécifier la valeur sur laquelle rechercher.

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

Étiquette personnalisée

$$restProps sont transmis à svelte-search.

Utilisez l'accessoire label pour spécifier une étiquette personnalisée.

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

Étiquette masquée

Définissez hideLabel sur true pour masquer visuellement l’étiquette.

Il est recommandé de définir l' label – même si elle est masquée – pour l'accessibilité.

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

Résultats personnalisés

Ce composant utilise la bibliothèque floue pour mettre en évidence les caractères correspondants avec l'élément mark.

Utilisez l'emplacement par défaut pour afficher des résultats personnalisés.

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

Aucun résultat

Utilisez l'emplacement « aucun résultat » pour afficher un message si la valeur de recherche ne donne pas de résultats.

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

Limiter le nombre de résultats

Utilisez l'accessoire limit pour spécifier le nombre maximum de résultats à afficher. La valeur par défaut est Infinity .

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

Éléments désactivés

Désactivez les éléments à l'aide du filtre disable . Les éléments désactivés ne sont pas sélectionnables ni navigables au clavier.

Dans l'exemple suivant, les éléments dont la valeur state contient « Carolina » sont désactivés.

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

Mise au point après la sélection

Définissez focusAfterSelect sur true pour recentrer l’entrée de recherche après avoir sélectionné un résultat.

< Typeahead focusAfterSelect { data } { extract } />

Afficher la liste déroulante sur le focus

Par défaut, la liste déroulante sera affichée si la value a des résultats.

Définissez showDropdownOnFocus sur true pour afficher la liste déroulante uniquement lorsque l'entrée de recherche est ciblée.

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

Afficher tous les résultats sur focus

Par défaut, aucun résultat n'est affiché si une entrée vide (c'est-à-dire value="" ) est ciblée.

Définissez showAllResultsOnFocus sur true pour que tous les résultats soient affichés lorsqu'une entrée vide est ciblée.

< Typeahead showAllResultsOnFocus { data } { extract } />

Stylisme

Remarque : ce composant est conçu de manière minimale. Vous pouvez cibler le composant à l'aide du sélecteur [data-svelte-typeahead] .

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

API

Accessoires

Nom	Taper	Valeur par défaut	Description
valeur	`string`	`""`	Saisissez la valeur de recherche.
données	`TItem[]`	`[]`	Éléments à rechercher.
extrait	`(TItem) => any`	`(item) => item`	Ciblez la valeur si `TItem` est un objet.
désactiver	`(TItem) => boolean`	`(item) => false`	Les éléments désactivés sont affichés dans les résultats mais ne peuvent pas être sélectionnés.
filtre	`(TItem) => boolean`	`(item) => false`	Les éléments filtrés ne seront pas affichés dans les résultats.
sélection automatique	`boolean`	`true`	S'il faut sélectionner automatiquement le premier résultat.
entréeAprèsSélection	`"update" \| "clear" \| "keep"`	`"update"`	Réglez sur `"clear"` pour effacer la `value` après avoir sélectionné un résultat. Réglez sur `"keep"` pour conserver le champ de recherche inchangé après une sélection.
résultats	`FuzzyResult[]`	`[]`	Résultats flous bruts du module flou
focusAprèsSélection	`boolean`	`false`	Définissez sur `true` pour recentrer l’entrée après avoir sélectionné un résultat.
showDropdownOnFocus	`boolean`	`false`	Définissez sur `true` pour afficher les résultats uniquement lorsque l’entrée est ciblée.
showAllResultsOnFocus	`boolean`	`false`	Définissez sur `true` pour que tous les résultats soient affichés lorsqu’une entrée vide est ciblée.
limite	`number`	`Infinity`	Spécifiez le nombre maximum de résultats à afficher.
`...$$restProps`	(transmis à `svelte-search` )	N / A	Tous les autres accessoires sont transmis à l'élément d'entrée.

Événements distribués

on:select : distribué lors de la sélection d'un résultat
on:clear : envoyé lors de l'effacement du champ de saisie

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