svelte search

날렵한 검색

접근 가능하고 사용자 정의 가능한 Svelte 검색 구성 요소입니다.

이 검색 구성 요소는 의미 form 과 input 요소를 사용하여 구성됩니다.

드롭다운 결과가 있는 검색 구성 요소는 svelte-typeahead를 참조하세요.

Svelte REPL에서 사용해 보세요.

---

설치

 # npm
npm i svelte-search

# pnpm
pnpm i svelte-search

# Yarn
yarn add svelte-search

# Bun
bun add svelte-search

스타일링

이 구성요소는 설계상 스타일이 지정되지 않았습니다. [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 ;
}

용법

양방향 바인딩

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

  let value = " " ;
</ script >

< Search bind:value />

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

에:제출

input 요소는 form 에 포함되어 있습니다. "Enter" 키를 눌렀을 때 값을 얻으려면 전달된 submit 이벤트를 사용하세요.

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

자리표시자 텍스트로 라벨 지정

$$restProps 입력 요소로 전달됩니다.

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

라벨 슬롯

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

시각적으로 숨겨진 라벨

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

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

포커스(선언적)

입력에 선언적으로 초점을 맞추려면 autofocus prop을 사용하세요.

< Search autofocus />

초점(프로그래밍 방식)

ref prop을 바인딩하여 프로그래밍 방식으로 입력에 초점을 맞춥니다.

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

  let ref = null ;
</ script >

< Search bind:ref />

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

디바운스된 입력

debounce 속성을 사용하여 디바운스 값을 밀리초 단위로 지정합니다.

< 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 입력 요소로 전달됩니다.

소품

소품 이름	유형	기본값
값	string	""
상표	string	"Search"
hideLabel	boolean	false
디바운스	number	0
심판	HTMLInputElement	null
ID	string	"search" + Math.random().toString(36)
제거FormAria속성	boolean	false
자동 초점	boolean	false

전달된 이벤트

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

전달된 이벤트

• on:type : 입력 값이 업데이트되면 실행됩니다.
• on:clear : 입력 값을 지우기 위해 "X" 버튼을 클릭하면 실행됩니다.

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

변경 내역

변경 내역

특허

MIT