Tokenizer

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		제안 목록에서 선택했던 아이템입니다.
allowInputValue	boolean	false	사용자는 제안 목록에서 값을 선택해서 추가하는 것 외에도, 입력 필드에 직접 값을 입력하여 속성 delimiterOnKeys 따라 값을 추가할 수 있습니다. delimiterOnKeys의 기본 키코드는 [9, 13]으로, 이는 각각 "Tab", "Enter" 입니다.
allowMultiple	boolean	true	사용자가 여러 항목을 선택할 수 있는지 여부입니다.
requireSelection	boolean	false	적어도 하나의 아이템이 항상 선택되어야 하는 여부입니다.
valueField	string		선택된 아이템의 값을 결정하는 필드의 이름입니다.
selectedItem	object		선택된 아이템을 정의합니다.
selectedItems	Array<object>		복수 선택된 아이템을 정의합니다.
selectedValue	Array<string>		선택된 아이템의 valueField 속성 값을 정의합니다.

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	포커스를 잃을때 발생합니다.
suggest-add	(event: SuggestEvent<T>) => void	토큰 아이템 추가시 발생합니다.
suggest-remove	(event: SuggestEvent<T>) => void	토큰 아이템 삭제시 발생합니다.
suggest-duplicate	(event: SuggestEvent<T>) => void	토큰 아이템 추가시 중복된 아이템이 있을때 발생합니다.