자동완성 기능을 제공하는 입력필드 AutoComplete 컴포넌트의 기본 스타일은 다음과 같다. 특정 검색어를 입력하면, 해당 문자가 포함된 데이터가 자동으로 하단에 리스트업 되어 사용자가 원하는 데이터를 빠르게 선택 할 수 있다.

( 참고: Input Component | Common options )

ex 문자 “S” 입력 > 해당 문자가 포함된 testS 데이터 자동 출력

Open

Open

Basic UI

기본 UI는 미리 데이터가 셋팅 된 입력필드이다. 상단 라벨 표시는 Hidden Label 옵션을 사용하여 숨김 처리 할 수 있으며, Disable 옵션을 설정하여 비활성화 상태로 사용 할 수 있다.

Function

1. Active First Value

미리 셋팅 된 데이터 목록에서 첫 번째 값을 Default로 설정 할 수 있다.

2. Width

필드의 기본 넓이와 Min Width 와 Max Width 를 직접 입력하여 설정 할 수 있다.

3. Disable Clear

Clear 아이콘을 사용하지 않을 수 있다.

4. Exclude Items

이미 셋팅 해 놓은 데이터 선택 목록에서 제외하고 싶은 데이터가 있다면 Exclude Items 옵션에서 아래와 같이 직접 선택하여 제외 시킬 수 있다.

5. Addon Create Button

AutoComplete 컴포넌트의 셋팅 데이터를 바로 Create 할 수 있는 버튼 사용 여부를 설정 할 수 있다.

#Addon Create Button 옵션 상세

• Addon Create Button Label : 버튼 라벨 설정

• Create Page Type : 클릭 시 오픈 할 페이지 타입 선택(Modal, Page, Window)

• Create Page : 연결하고자 하는 path 선택 또는 직접 입력

6. Addon Search Button

사용자가 셋팅 데이터를 Detail하게 확인하고 선택해야하는 경우 검색 버튼 옵션을 활용 할 수 있다. 아래 화면과 같이 검색 버튼을 클릭하면, 데이터 상세 내용을 확인 할 수 있는 테이블 리스트가 Modal로 출력된다.

#Addon Search Button 옵션 상세

• Addon Search Button Label : 버튼 라벨 설정

• Search Page Type : 클릭 시 오픈 할 페이지 타입 선택 - Modal

  • Modal Render Type : 모달 렌더 타입 선택(Page, Components)

  • Modal Page : 모달로 연결 할 path 선택 또는 직접 입력