Bubble.io에서 자동 완성 필드를 어떻게 만드는지?

단계 1:
Bubble.io 편집기를 열고 자동 완성 필드를 추가하려는 페이지로 이동하세요.

단계 2:
자동 완성 기능을 원하는 위치에 시각적 요소 메뉴에서 새 입력 요소를 캔버스에 드래그하세요.

단계 3:
입력 요소를 선택하고 속성 편집기로 이동하세요. 콘텐츠 형식 드롭다운 메뉴에서 "텍스트 (자동 완성)"을 선택하거나, 가능하면 단순하게 "텍스트"를 선택하세요.

단계 4:
자동 완성 기능을 사용하려면 사용자가 선택할 수 있는 동적 선택 사항으로 입력 요소를 채워야 합니다. 이를 위해 제안 목록을 제공할 데이터 소스를 파악하세요. 이는 데이터베이스의 리스트나 옵션 세트로 구성된 옵션일 수 있습니다.

단계 5:
속성 편집기에서 회색 '동적 선택' 상자를 클릭하여 데이터 소스를 설정하세요.

단계 6:
동적 선택 패널에서 자동 완성이 검색할 데이터 유형과 필드를 선택하세요. 사용자, 제품 등의 목록이 필요할 수 있으며, 이는 제공하려는 자동 완성 제안에 따라 다릅니다.

단계 7:
'검색 대상' 필드를 사용하여 필요한 경우 제약 조건이나 정렬을 정의하세요. 예를 들어, 재고에 있는 제품만 표시하거나 이메일이 확인된 사용자만 표시하도록 선택할 수 있습니다.

단계 8:
자동 완성에서 표시될 필드를 정의하세요. 이는 보통 '이름'이나 '제목'이며, 사용자가 드롭다운에서 볼 수 있고 선택할 수 있습니다.

단계 9:
(선택 사항) 사용자가 입력할 때 자동 완성이 제안사항을 필터링하도록 하려면, 표시되는 필드가 입력 값 '포함'을 갖는 제약 조건을 검색에 추가해야 합니다.

단계 10:
설정한 후에 페이지를 미리보고 입력 요소에 입력하여 자동 완성 제안사항이 나타나는지 확인하세요.

이 가이드를 사용하여 사용자가 입력하면서 실시간 제안을 제공함으로써 사용자 경험을 개선하는 직관적인 자동 완성 입력 필드를 Bubble.io에 생성할 수 있습니다. 이 설정은 효율적인 데이터 입력을 돕고 입력 과정에서 사용자를 안내함으로써 사용자 오류를 줄입니다.