검색하며 고르는 선택창 · Combobox

검색 선택창. 입력한 글자로 선택지를 좁히고 목록에서 값을 고르는 UI

조회 0추천 0

직접 만든 예시

[담당자 목록]을 검색 가능한 자동완성 콤보박스로 만들어줘. 입력으로 후보를 좁히고 방향키·Enter로 선택, Esc로 닫게 해줘. 결과 없음과 선택된 값도 표시해줘.

빈칸을 내 상황에 맞게 채워 사용하세요.

입력과 결과 비교

설명용 예시

입력 담당자를 고르는 UI를 만들어줘.

“김” 입력 → 김민서·김지우만 표시 → 방향키와 Enter로 선택

활용 방식을 보여주는 예시이며, 직접 실행한 결과가 아닙니다.

선택지가 많을 때 긴 드롭다운을 끝까지 훑는 수고를 줄입니다. 검색창과 선택 목록을 따로 설명하는 대신 필요한 동작을 함께 전달할 수 있습니다.

전문 용어를 활용해 mouseco가 작성한 문구입니다. 출처는 용어와 기법의 참고 문서입니다. 원출처 ↗

기존 가이드와 자세한 사용법 읽기

안녕하세요 mouseco 입니다. :)

Editable combobox · 자동완성 콤보박스은 검색 선택창. 입력한 글자로 선택지를 좁히고 목록에서 값을 고르는 UI입니다.

막연한 요청을 구체적인 문구로

기존 요청: 담당자를 고르는 UI를 만들어줘.

[담당자 목록]을 검색 가능한 자동완성 콤보박스로 만들어줘. 입력으로 후보를 좁히고 방향키·Enter로 선택, Esc로 닫게 해줘. 결과 없음과 선택된 값도 표시해줘.

“김” 입력 → 김민서·김지우만 표시 → 방향키와 Enter로 선택

예시는 위 기법을 보여주기 위해 직접 제작했습니다. 수치와 업무 상황은 가상이며 특정 모델의 성능 비교 결과가 아닙니다.

선택지가 많을 때 긴 드롭다운을 끝까지 훑는 수고를 줄입니다. 검색창과 선택 목록을 따로 설명하는 대신 필요한 동작을 함께 전달할 수 있습니다.

적용할 때 확인할 점: 콤보박스에는 입력할 수 없는 선택 전용 형태도 있습니다. 이 카드에서는 검색 가능한 editable combobox를 요청합니다.