svelte search

schlanke Suche

Zugängliche, anpassbare Svelte-Suchkomponente.

Diese Suchkomponente besteht aus semantischen form und input .

Eine Suchkomponente mit Dropdown-Ergebnissen finden Sie unter svelte-typeahead.

Probieren Sie es im Svelte REPL aus.

---

Installation

 # npm
npm i svelte-search

# pnpm
pnpm i svelte-search

# Yarn
yarn add svelte-search

# Bun
bun add svelte-search

Styling

Diese Komponente ist vom Design her nicht gestylt. Zielen Sie mit dem Selektor [data-svelte-search] auf die Komponente.

 : 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 ;
}

Verwendung

Zwei-Wege-Bindung

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

  let value = " " ;
</ script >

< Search bind:value />

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

am: abschicken

Das input ist in einem form enthalten. Verwenden Sie das weitergeleitete submit -Ereignis, um den Wert zu erhalten, wenn Sie die Eingabetaste drücken.

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

Beschriftung mit Platzhaltertext

$$restProps werden an das Eingabeelement weitergeleitet.

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

Etikettenschlitz

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

Optisch verstecktes Etikett

Setzen Sie hideLabel auf true um die Beschriftung optisch auszublenden.

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

Fokus (deklarativ)

Verwenden Sie die autofocus Requisite, um die Eingabe deklarativ zu fokussieren.

< Search autofocus />

Fokus (programmatisch)

Binden Sie die ref Requisite, um die Eingabe programmgesteuert zu fokussieren.

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

  let ref = null ;
</ script >

< Search bind:ref />

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

Entprellter Eingang

Verwenden Sie die debounce Requisite, um den Entprellungswert in Millisekunden anzugeben.

< 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 werden an das Eingabeelement weitergeleitet.

Requisiten

Requisitenname	Typ	Standardwert
Wert	string	""
Etikett	string	"Search"
hideLabel	boolean	false
entprellen	number	0
ref	HTMLInputElement	null
Ausweis	string	"search" + Math.random().toString(36)
RemoveFormAriaAttributes	boolean	false
Autofokus	boolean	false

Weitergeleitete Ereignisse

• on:Eingabe
• on:ändern
• am: abschicken
• auf:fokus
• on:unschärfe
• on:keydown

Gesendete Ereignisse

• on:type : wird ausgelöst, wenn der Eingabewert aktualisiert wird
• on:clear : wird ausgelöst, wenn auf die Schaltfläche „X“ geklickt wird, um den Eingabewert zu löschen

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

Änderungsprotokoll

Änderungsprotokoll

Lizenz

MIT