¿Cómo crear sugerencias de autocompletado en Bubble.io?

Para crear sugerencias de autocompletado en Bubble.io utilizando el elemento 'Search Box', sigue estos sencillos pasos:

Paso 1: Ve a tu editor de Bubble.

Paso 2: Inserta un elemento de 'Search Box' en tu página. La caja de búsqueda es un elemento que proporciona una experiencia de autocompletado, mostrando coincidencias a medida que escribes.

Paso 3: Haz clic en el elemento de Search Box que has añadido.

Paso 4: Define la propiedad 'Placeholder'. Este es el texto en gris que aparecerá en el cuadro de búsqueda cuando esté vacío, indicando a los usuarios qué escribir.

Paso 5: Elige el estilo de 'Choices'. Puedes seleccionar entre 'Static choices', 'Dynamic choices', y 'Geographic places'. Para la funcionalidad de autocompletado, normalmente seleccionarás 'Dynamic choices'.

Paso 6: Si seleccionas 'Static choices', introduce tus opciones deseadas en la lista de 'Choices', cada una en una nueva línea. Si seleccionas 'Dynamic choices', necesitas definir tu lista dinámica de opciones en la 'Choices source' realizando una búsqueda o seleccionando una lista de tus datos.

Paso 7: Si se seleccionan 'Dynamic choices', también debes configurar el 'Field to search'. Este será el campo en tu base de datos que contiene los textos utilizados para el autocompletado, como 'Name' para una lista de usuarios.

Paso 8: Opcionalmente, establece el 'Field to display', especialmente si has configurado tu búsqueda para incluir todos los campos indexados y quieres mostrar información específica.

Paso 9: Si lo deseas, marca la casilla 'Allow entries not in list' para permitir a los usuarios escribir texto que no esté incluido en tu lista predefinida o base de datos.

Paso 10: Establece el 'Maximum entries to show' para controlar cuántas sugerencias se muestran a la vez en el menú desplegable. Recuerda, listas más largas pueden tardar más tiempo en cargarse.

Paso 11: Si es necesario, marca 'Prevent "enter" key from submitting' en caso de que quieras desactivar el envío del formulario cuando un usuario presiona la tecla de enter después de escribir en el cuadro de búsqueda.

Paso 12: Finalmente, configura cualquier configuración adicional como 'Default value', 'Prefer results around', y 'Radius (meters)' según tus necesidades específicas.

Paso 13: No olvides guardar tus cambios y probar la caja de búsqueda en tu aplicación Bubble para asegurarte de que funciona correctamente.

Tus sugerencias de autocompletado están ahora configuradas, y los usuarios verán sugerencias dinámicas y en tiempo real a medida que escriban en la caja de búsqueda. ¡Disfruta proporcionando una experiencia de usuario fluida y receptiva en tu aplicación Bubble.io!