Unduh svelte typeahead - unduh kode sumber svelte typeahead

svelte typeahead

Kode sumber lainnya

v4.4.2

Unduh

tipe langsing

Komponen typeahead pencarian fuzzy yang dapat diakses.

Komponen ini menggunakan perpustakaan fuzzy ringan untuk sisi klien, pencarian fuzzy dan mengikuti pedoman WAI-ARIA.

Cobalah di Svelte REPL.

Instalasi

 # npm
npm i svelte-typeahead

# pnpm
pnpm i svelte-typeahead

# Yarn
yarn add svelte-typeahead

# Bun
bun add svelte-typeahead

Penggunaan

Dasar

Meneruskan array objek ke prop data . Gunakan prop extract untuk menentukan nilai yang akan dicari.

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

Label khusus

$$restProps diteruskan ke svelte-search.

Gunakan prop label untuk menentukan label khusus.

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

Label tersembunyi

Setel hideLabel ke true untuk menyembunyikan label secara visual.

Anda disarankan untuk menyetel label – meskipun tersembunyi – untuk aksesibilitas.

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

Hasil bergaya khusus

Komponen ini menggunakan perpustakaan fuzzy untuk menyorot karakter yang cocok dengan elemen tanda.

Gunakan slot default untuk merender hasil khusus.

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

Tidak ada hasil

Gunakan slot "tidak ada hasil" untuk menampilkan pesan jika nilai pencarian tidak memberikan hasil.

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

Batasi jumlah hasil

Gunakan prop limit untuk menentukan jumlah maksimum hasil yang akan ditampilkan. Standarnya adalah Infinity .

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

Item yang dinonaktifkan

Nonaktifkan item menggunakan filter disable . Item yang dinonaktifkan tidak dapat dipilih atau dinavigasi dengan keyboard.

Dalam contoh berikut, item dengan nilai state yang mengandung "Carolina" dinonaktifkan.

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

Fokus setelah memilih

Atur focusAfterSelect ke true untuk memfokuskan kembali input pencarian setelah memilih hasil.

< Typeahead focusAfterSelect { data } { extract } />

Tampilkan dropdown pada fokus

Secara default, dropdown akan ditampilkan jika value memiliki hasil.

Atur showDropdownOnFocus ke true untuk hanya menampilkan dropdown saat input pencarian terfokus.

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

Tampilkan semua hasil pada fokus

Secara default, tidak ada hasil yang ditampilkan jika input kosong (yaitu, value="" ) difokuskan.

Atur showAllResultsOnFocus ke true agar semua hasil ditampilkan ketika input kosong difokuskan.

< Typeahead showAllResultsOnFocus { data } { extract } />

Penataan gaya

Catatan: komponen ini ditata secara minimal berdasarkan desain. Anda dapat menargetkan komponen menggunakan pemilih [data-svelte-typeahead] .

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

API

Alat peraga

Nama	Jenis	Nilai bawaan	Keterangan
nilai	`string`	`""`	Masukkan nilai pencarian.
data	`TItem[]`	`[]`	Item untuk dicari.
ekstrak	`(TItem) => any`	`(item) => item`	Targetkan nilainya jika `TItem` adalah objek.
cacat	`(TItem) => boolean`	`(item) => false`	Item yang dinonaktifkan ditampilkan dalam hasil tetapi tidak dapat dipilih.
menyaring	`(TItem) => boolean`	`(item) => false`	Item yang difilter tidak akan ditampilkan dalam hasil.
pilih otomatis	`boolean`	`true`	Apakah akan memilih hasil pertama secara otomatis.
masukanSetelahPilih	`"update" \| "clear" \| "keep"`	`"update"`	Setel ke `"clear"` untuk menghapus `value` setelah memilih hasil. Setel ke `"keep"` agar bidang pencarian tidak berubah setelah pemilihan.
hasil	`FuzzyResult[]`	`[]`	Hasil fuzzy mentah dari modul fuzzy
fokusSetelahPilih	`boolean`	`false`	Atur ke `true` untuk memfokuskan kembali input setelah memilih hasil.
tampilkanDropdownOnFocus	`boolean`	`false`	Atur ke `true` untuk hanya menampilkan hasil saat input terfokus.
tampilkanSemuaHasilOnFocus	`boolean`	`false`	Setel ke `true` agar semua hasil ditampilkan saat input kosong difokuskan.
membatasi	`number`	`Infinity`	Tentukan jumlah maksimum hasil yang akan ditampilkan.
`...$$restProps`	(diteruskan ke `svelte-search` )	T/A	Semua props lainnya diteruskan ke elemen input.

Acara yang dikirim

on:select : dikirim saat memilih hasil
on:clear : dikirim saat mengosongkan kolom input

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