Autocomplete

개요

AutoComplete 컴포넌트는 사용자가 입력한 텍스트를 기반으로 관련 추천 항목을 실시간으로 제안하는 기능을 제공합니다. 입력을 빠르게 완성할 수 있도록 도와주며, 검색 기능이 필요한 곳에서 유용하게 사용할 수 있습니다.

주요 기능

1. 커스텀 렌더러

제안목록의 각 항목을 사용자가 원하는 형태로 렌더링할 수 있습니다. 텍스트, 이미지, 버튼 등을 자유롭게 조합하여 항목을 표현할 수 있습니다.

관련 항목 보기

• 속성

  suggestSource, label, labelField, minChar

---

2. 제안 목록 상태 처리

추천 목록 로딩 중 또는 데이터가 없을 때의 상태를 시각적으로 표시하여 사용자 경험을 개선합니다.

관련 항목 보기

• 속성

  placeholder, suggestSource, labelField, minChar

---

3. 제안 목록 설정

입력된 텍스트와 관련된 추천 목록을 구성하는 로직을 사용자 정의하여 다양한 추천 기준을 적용할 수 있습니다. (예:API 호출, 로컬 데이터 필터링 등)

관련 항목 보기

• 속성

  label, suggestSource,labelField

---

4. label, placeholder:

입력 필드에 label과 placeholder를 설정하여 사용자에게 입력 목적과 형식을 명확하게 안내합니다.

관련 항목 보기

• 속성

  label, placeholder, suggestSource, minChar

---

5. 최소 문자열 지정

사용자가 너무 짧은 단어를 입력했을 때 불필요한 추천이 뜨지 않도록, 몇 글자 이상 입력해야 추천이 시작될지 설정할 수 있습니다.

관련 항목 보기

• 속성

  suggestSource, labelField, minChar

Minimum characters

2

Please enter at least 2 characters.

---

6. 제안 목록 컨테이너 제어

추천 목록 컨테이너의 자동 및 수동 닫기 기능을 제공하여 사용자가 편리하게 추천 목록을 관리할 수 있도록 합니다.

관련 항목 보기

• 속성

  label, suggestSource, labelField, clearable

Close the suggest when an item is selected.

Close the suggest when it loses focus.

Close the suggest when clicking outside.