svelte typeahead

날렵한 활자체

접근 가능한 퍼지 검색 자동 완성 구성 요소입니다.

이 구성 요소는 클라이언트 측 퍼지 검색을 위해 경량 퍼지 라이브러리를 사용하고 WAI-ARIA 지침을 따릅니다.

Svelte REPL에서 사용해 보세요.

---

설치

 # npm
npm i svelte-typeahead

# pnpm
pnpm i svelte-typeahead

# Yarn
yarn add svelte-typeahead

# Bun
bun add svelte-typeahead

용법

기초적인

data 소품에 객체 배열을 전달합니다. extract prop을 사용하여 검색할 값을 지정하세요.

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

맞춤 라벨

$$restProps svelte-search로 전달됩니다.

사용자 정의 라벨을 지정하려면 label 소품을 사용하세요.

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

숨겨진 라벨

레이블을 시각적으로 숨기려면 hideLabel true 로 설정하십시오.

접근성을 위해 숨겨진 경우에도 label 설정하는 것이 좋습니다.

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

맞춤 스타일 결과

이 구성 요소는 퍼지 라이브러리를 사용하여 마크 요소와 일치하는 문자를 강조 표시합니다.

사용자 정의 결과를 렌더링하려면 기본 슬롯을 사용하십시오.

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

결과 없음

검색 값으로 결과가 나오지 않는 경우 "결과 없음" 슬롯을 사용하여 메시지를 렌더링합니다.

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

결과 수 제한

표시할 최대 결과 수를 지정하려면 limit 소품을 사용하세요. 기본값은 Infinity 입니다.

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

비활성화된 항목

disable 필터를 사용하여 항목을 비활성화합니다. 비활성화된 항목은 키보드로 선택하거나 탐색할 수 없습니다.

다음 예에서는 state 값에 "Carolina"가 포함된 항목이 비활성화되어 있습니다.

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

선택 후 포커스

결과를 선택한 후 검색 입력에 다시 초점을 맞추려면 focusAfterSelect true 로 설정하십시오.

< Typeahead focusAfterSelect { data } { extract } />

초점에 드롭다운 표시

기본적으로 value 에 결과가 있으면 드롭다운이 표시됩니다.

검색 입력에 포커스가 있을 때만 드롭다운을 표시하려면 showDropdownOnFocus true 로 설정하세요.

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

초점이 맞춰진 모든 결과 표시

기본적으로 빈 입력(즉, value="" )에 초점이 맞춰지면 결과가 표시되지 않습니다.

빈 입력에 포커스가 있을 때 모든 결과가 표시되도록 하려면 showAllResultsOnFocus true 로 설정하세요.

< Typeahead showAllResultsOnFocus { data } { extract } />

스타일링

참고: 이 구성요소는 설계상 최소한의 스타일로 지정되었습니다. [data-svelte-typeahead] 선택기를 사용하여 구성 요소를 타겟팅할 수 있습니다.

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

API

소품

이름	유형	기본값	설명
값	string	""	검색값을 입력하세요.
데이터	TItem[]	[]	검색할 항목입니다.
발췌	(TItem) => any	(item) => item	TItem 객체인 경우 값을 대상으로 합니다.
장애를 입히다	(TItem) => boolean	(item) => false	비활성화된 항목은 결과에 표시되지만 선택할 수는 없습니다.
필터	(TItem) => boolean	(item) => false	필터링된 항목은 결과에 표시되지 않습니다.
자동 선택	boolean	true	첫 번째 결과를 자동으로 선택할지 여부입니다.
입력후선택	"update" | "clear" | "keep"	"update"	결과를 선택한 후 value 지우려면 "clear" 로 설정하십시오. 선택 후 검색 필드를 변경하지 않고 유지하려면 "keep" 로 설정하십시오.
결과	FuzzyResult[]	[]	퍼지 모듈의 원시 퍼지 결과
포커스AfterSelect	boolean	false	결과를 선택한 후 입력에 다시 초점을 맞추려면 true 로 설정하세요.
showDropdownOnFocus	boolean	false	입력에 포커스가 있을 때만 결과를 표시하려면 true 로 설정합니다.
showAllResultsOnFocus	boolean	false	빈 입력에 포커스가 있을 때 모든 결과가 표시되도록 하려면 true 로 설정하세요.
한계	number	Infinity	표시할 최대 결과 수를 지정합니다.
...$$restProps	( svelte-search 로 전달됨)	해당 없음	다른 모든 props는 입력 요소로 전달됩니다.

전달된 이벤트

• on:select : 결과를 선택할 때 전달됩니다.
• on:clear : 입력 필드를 지울 때 전달됩니다.

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

전달된 이벤트

다음 이벤트는 svelte-search 구성 요소로 전달됩니다.

• 켜기:입력
• 켜짐:입력
• 에:변경
• 에:초점
• 켜기:지우기
• 켜기:흐림
• 켜짐:키다운

변경 내역

변경 내역

특허

MIT