svelte search

pencarian langsing

Komponen pencarian Svelte yang dapat diakses dan disesuaikan.

Komponen pencarian ini disusun menggunakan form semantik dan elemen input .

Lihat svelte-typeahead untuk komponen pencarian dengan hasil dropdown.

Cobalah di Svelte REPL.

---

Instalasi

 # npm
npm i svelte-search

# pnpm
pnpm i svelte-search

# Yarn
yarn add svelte-search

# Bun
bun add svelte-search

Penataan gaya

Komponen ini tidak memiliki gaya desain. Targetkan komponen menggunakan pemilih [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 ;
}

Penggunaan

Pengikatan dua arah

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

  let value = " " ;
</ script >

< Search bind:value />

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

pada: kirim

Elemen input terkandung dalam form . Gunakan acara submit yang diteruskan untuk mendapatkan nilai saat menekan "Enter."

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

Labeli dengan teks placeholder

$$restProps diteruskan ke elemen input.

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

Slot label

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

Label tersembunyi secara visual

Setel hideLabel ke true untuk menyembunyikan label secara visual.

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

Fokus (deklaratif)

Gunakan prop autofocus untuk memfokuskan input secara deklaratif.

< Search autofocus />

Fokus (terprogram)

Ikat prop ref untuk memfokuskan input secara terprogram.

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

  let ref = null ;
</ script >

< Search bind:ref />

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

Masukan yang di-debounce

Gunakan prop debounce untuk menentukan nilai debounce dalam milidetik.

< 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 diteruskan ke elemen input.

Alat peraga

Nama penyangga	Jenis	Nilai bawaan
nilai	string	""
label	string	"Search"
sembunyikanLabel	boolean	false
menghilangkan bouncing	number	0
referensi	HTMLInputElement	null
pengenal	string	"search" + Math.random().toString(36)
hapusFormAriaAttributes	boolean	false
fokus otomatis	boolean	false

Acara yang diteruskan

• pada: masukan
• pada: ubah
• pada: kirim
• pada: fokus
• pada: kabur
• pada: tombol bawah

Acara yang dikirim

• on:type : diaktifkan ketika nilai input diperbarui
• on:clear : diaktifkan ketika mengklik tombol "X" untuk menghapus nilai input

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

log perubahan

log perubahan

Lisensi

MIT