svelte search

recherche svelte

Composant de recherche Svelte accessible et personnalisable.

Ce composant de recherche est composé d' form sémantique et d'éléments input .

Voir svelte-typeahead pour un composant de recherche avec des résultats déroulants.

Essayez-le dans le Svelte REPL.

---

Installation

 # npm
npm i svelte-search

# pnpm
pnpm i svelte-search

# Yarn
yarn add svelte-search

# Bun
bun add svelte-search

Stylisme

Ce composant n'est pas stylé par conception. Ciblez le composant à l'aide du sélecteur [data-svelte-search] .

 : global ([ data-svelte-search ] input ) {
  width : 100 % ;
  font-size : 1 rem ;
  padding : 0.5 rem ;
  margin : 0.5 rem 0 ;
  border : 1 px solid # e0e0e0 ;
  border-radius : 0.25 rem ;
}

Usage

Liaison bidirectionnelle

< script >
  import Search from " svelte-search " ;

  let value = " " ;
</ script >

< Search bind:value />

{ #if value }
  < button on:click ={() => ( value = " " )}>Clear "{ value }"</ button >
{ /if }

sur : soumettre

L'élément input est contenu dans un form . Utilisez l'événement submit transféré pour obtenir la valeur lorsque vous appuyez sur "Entrée".

< Search bind:value on:submit ={() => console . log ( " submit " , value )} />

Étiquette avec texte d'espace réservé

$$restProps sont transmis à l'élément d'entrée.

< Search label = " My label " placeholder = " Placeholder text... " />

Fente pour étiquette

< Search >
  < span slot = " label " style = " color: red; " >Custom label</ span >
</ Search >

Étiquette visuellement cachée

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

< Search hideLabel label = " My label " placeholder = " Placeholder text... " />

Focus (déclaratif)

Utilisez l’accessoire autofocus pour focaliser de manière déclarative l’entrée.

< Search autofocus />

Focus (programmatique)

Liez l’accessoire ref pour concentrer l’entrée par programme.

< script >
  import Search from " svelte-search " ;

  let ref = null ;
</ script >

< Search bind:ref />

< button on:click ={() => ref . focus ()}>Focus</ button >

Entrée anti-rebond

Utilisez l'accessoire debounce pour spécifier la valeur anti-rebond en millisecondes.

< script >
  import Search from " svelte-search " ;

  let events = [];
</ script >

< Search
  debounce ={ 800 }
  on:type ={({ detail : value }) => ( events = [ ... events , value ])}
/>

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

API

$$restProps sont transmis à l'élément d'entrée.

Accessoires

Nom de l'accessoire	Taper	Valeur par défaut
valeur	string	""
étiquette	string	"Search"
masquerÉtiquette	boolean	false
anti-rebond	number	0
réf	HTMLInputElement	null
identifiant	string	"search" + Math.random().toString(36)
supprimerFormAriaAttributes	boolean	false
mise au point automatique	boolean	false

Événements transférés

• activé: entrée
• sur:changer
• sur : soumettre
• sur: se concentrer
• activé:flou
• sur : touche enfoncée

Événements distribués

• on:type : déclenché lorsque la valeur d'entrée est mise à jour
• on:clear : déclenché en cliquant sur le bouton "X" pour effacer la valeur d'entrée

< Search
  on:type ={( e ) => {
    console . log ( " type " , e . detail ); // input value
  }}
  on:clear ={() => {
    console . log ( " clear " );
  }}
/>

Journal des modifications

Journal des modifications

Licence

MIT