Autocomplete

Properties

Property	Type	Default	Description
label	string	''	입력 필드의 레이블 텍스트입니다.
placeholder	string	''	입력 필드에 값이 입력되지 않는 경우 표시되는 텍스트입니다.
suggestSource	string|Function|Promise<any>		키 입력 시 해당 입력 값에 일치하는 데이터를 생성하는 데이터 소스를 정의합니다.
suggestCount	number	6	제안 목록에 표시될 아이템 개수입니다.
labelField	string|Function	null	표시될 아이템의 값이 결정되는 필드를 정의합니다.
closeOnSelect	boolean	true	아이템 선택 시 자동으로 제안 목록을 닫을지를 정의합니다.
closeOnFocusOut	boolean	true	포커스 아웃 시 자동으로 제안 목록을 닫을지를 정의합니다.
closeOnOutsideDown	boolean	true	외부 영역 다운 시 자동으로 제안 목록을 닫을지를 정의합니다.
inputValue	string	''	입력 필드에 현재 입력된 값입니다.
minChar	number	0	최소 문자 입력 개수입니다. 최소 개수 만족 시 제안 목록이 활성화됩니다.
clearable	boolean	false	입력 필드에 값이 있을 때 초기화 버튼 활성화 여부입니다.
delimiterOnKeys	Array<number>	[9, 13]	사용자가 특정 키를 눌렀을 때 값을 입력하는 코드 배열입니다.
coordinateMode	'global'|'relative'|'none'	relative	팝업의 좌표 시스템을 설정합니다.
selectedItem	object		제안 목록에서 선택했던 아이템입니다.

Methods

Method	Parameters	Return Value	Description
focus		void	입력 필드에 포커스를 설정합니다.
blur		void	입력 필드에 포커스를 해제합니다.
openSuggest	value?: string	boolean	제안 목록을 엽니다. 해당 파라메터 value와 suggestSource 속성을 이용해 제안 목록을 가져오고 표시합니다.
closeSuggest		void	제안 목록을 닫습니다.
clear		void	입력된 값, 표시된 제안 목록, 그리고 선택된 아이템을 초기화합니다.

Events

Event	Type	Description
suggest-caret-change	(event: CustomEvent<{value: number; oldValue: number}>) => void	제안목록에서 커서 인덱스가 변경되었을때 발생합니다.
suggest-opening	(event: SuggestEvent<T>) => void	제안목록이 열리기 전에 발생합니다.
suggest-open	(event: SuggestEvent<T>) => void	제안목록이 열릴때 발생합니다.
suggest-closing	(event: SuggestEvent<T>) => void	제안목록이 닫히기 전에 발생합니다.
suggest-close	(event: SuggestEvent<T>) => void	제안목록이 닫힐때 발생합니다.
suggest-item-down	(event: SuggestEvent<T>) => void	제안 목록 아이템에 마우스 다운 했을때 발생합니다. selectOnClick이 false 경우에 발생합니다.
suggest-item-click	(event: SuggestEvent<T>) => void	제안 목록 아이템에 마우스 클릭 했을때 발생합니다. selectOnClick이 true 경우에 발생합니다.
suggest-select	(event: SuggestEvent<T>) => void	제안 목록의 특정 아이템을 선택했을 때 발생합니다.
value-change	(event: CustomEvent<{value: string; oldValue: string}>) => void	value 프로퍼티가 변경될때 발생합니다.
input	(event: CustomEvent<{value: string; trigger: InputEvent}>) => void	input 요소의 값이 변경될 때 발생합니다.
keydown	(event: CustomEvent<{value: string; trigger: KeyboardEvent}>) => void	input 요소에서 키보드를 누를때 발생합니다.
keyup	(event: CustomEvent<{value: string; trigger: KeyboardEvent}>) => void	input 요소에서 키보드를 땔때 발생합니다.
focusin	(event: CustomEvent<{trigger: Event}>) => void	포커스를 받을때 발생합니다.
focusout	(event: CustomEvent<{trigger: Event}>) => void	포커스를 잃을때 발생합니다.