Bubble.io에서 자동 완성 제안을 어떻게 만들 수 있나요?

Bubble.io에서 '검색 상자' 요소를 사용하여 자동 완성 제안을 만드는 방법은 다음과 같은 간단한 단계를 따르세요:

단계 1: Bubble Editor로 이동합니다.

단계 2: '검색 상자' 요소를 페이지에 삽입합니다. 검색 상자는 입력하면서 일치항 항목을 표시하는 자동 완성 경험을 제공하는 요소입니다.

단계 3: 추가한 검색 상자 요소를 클릭합니다.

단계 4: '자리 표시자' 속성을 정의합니다. 이것은 검색 상자가 비어있을 때 사용자에게 무엇을 입력할지 알려주는 회색 텍스트입니다.

단계 5: '선택 항목 스타일'을 선택합니다. '정적 선택항목', '동적 선택항목', 그리고 '지리적 장소' 중에서 선택할 수 있습니다. 자동 완성 기능의 경우, 일반적으로 '동적 선택항목'을 선택합니다.

단계 6: '정적 선택항목'을 선택한 경우, '선택' 목록에 각 줄마다 원하는 옵션을 입력하세요. '동적 선택항목'을 선택한 경우, 검색을 수행하거나 데이터에서 목록을 선택하여 '선택 소스'에 동적 옵션 목록을 정의해야 합니다.

단계 7: '동적 선택항목'이 선택된 경우, '검색할 필드'도 설정해야 합니다. 이것은 사용자 목록에 대한 '이름'처럼 자동 완성에 사용되는 텍스트가 포함된 데이터베이스의 필드가 될 것입니다.

단계 8: 선택사항으로, '표시할 필드'를 설정합니다. 특히 모든 색인화된 필드에 대한 검색을 설정하고 특정 정보를 표시하려는 경우에 이를 설정하면 됩니다.

단계 9: 원한다면, '목록에 없는 항목 허용' 상자를 체크하여 사용자가 미리 정의된 목록이나 데이터베이스에 포함되지 않은 텍스트를 입력할 수 있도록 합니다.

단계 10: '표시할 최대 항목 수'를 설정하여 드롭다운 메뉴에 한 번에 표시되는 제안의 수를 조절합니다. 목록이 더 길수록 로드하는 데 더 많은 시간이 걸릴 수 있다는 점을 기억하세요.

단계 11: 필요하다면, 'enter 키로 제출 방지'를 선택하여 사용자가 검색 상자에 입력한 후 enter 키를 눌렀을 때 양식 제출을 비활성화하려는 경우에 이를 선택하면 됩니다.

단계 12: 마지막으로, '기본값', '결과 주변 우선', 그리고 '반경 (미터)' 등의 추가 설정을 특정 요구 사항에 따라 구성합니다.

단계 13: 변경 사항을 저장하고 Bubble 애플리케이션의 검색 상자를 테스트하여 제대로 작동하는지 확인하는 것을 잊지 마세요.

자동 완성 제안이 이제 설정되었으며, 사용자들은 검색 상자에 입력하면서 동적이고 실시간 제안을 볼 수 있습니다. Bubble.io 앱에서 부드럽고 반응적인 사용자 체험을 제공하는 것을 즐기십시오!