Kuika's Auto Complete element allows users to receive automatic suggestions while entering text.

When the user starts typing, suitable options are presented from a predefined or dynamically retrieved data list.

This feature both enhances the user experience and reduces data entry errors.

The Auto Complete element can be used in both web and mobile applications.

Areas of Use

• Quickly selecting saved information in registration or payment forms
• Providing dynamic suggestions in search boxes
• Filtering lists such as addresses, cities, and countries
• Listing previously saved card, account, or user data

Usage Scenario – Selected Card Selection

In an event ticket purchase application, the user selects one of their registered cards when they reach the payment step. An Auto Complete element has been added to the page for this process.

In the scenario:

• The user arrives at the payment page for the Music Fest 2024 event.
• When they click on the “Select Registered Card” field, the registered card options (e.g., MasterCard, Visa, Amex) open.
• As the user begins typing, matching card names are filtered.
• Once selected, the card information is automatically linked to the payment transaction.

Connecting the Data Source

1. Datasources Module

• Go to the Datasources module.
• Then click the + icon next to the Tables heading and name the table “CardsData”.
• Create the following table.

• Create a new SQL Action and name it CardsData:

SELECT 1 AS Id, ‘MasterCard’ AS CardNameUNION ALLSELECT 2, ‘Visa’UNION ALLSELECT 3, ‘American Express’;

UI Design Module Operations

1. Go to the UI Design module.
2. Drag and drop the Auto Complete element from the Elements > Select Input category.

• Placeholder → “Choose or type your card”
• Options → Select the CardsData SQL Action.
• Allow Clear: If enabled, the user can clear their selection with a single click.
• Value: The selected card information can be dynamically transferred to the payment action.

Using Properties in the Scenario Context

• Options: The list of registered cards is dynamically loaded from the CardsData SQL Action.
• Placeholder: The phrase “Choose or type your card” guides the user.
• Allow Clear: Allows the user to easily reset their selection.
• Value: The selected card information is transferred to the payment form.
• Fixed Options List (alternative): A manual list of options can be defined without connecting to the database.

When the Scenario is Complete

• When the user clicks on the Select Registered Card field, the list of registered cards opens.
• When the user types the first letters of the card name, the suggestion list is automatically filtered.
• When “MasterCard” is selected, the value is processed in the payment form.
• If desired, the user can clear the selection by clicking the X icon.

Limitations

• If a dynamic data connection is to be made, an SQL Action must be linked to the Options field.
• List performance may be affected if there are too many records.
• If the placeholder text is left blank, the user may not understand what to enter.

Tips and Best Practices

• Use placeholder text that provides clear guidance to the user.
• List frequently used options at the top of the list.
• If the data is small and fixed, define a manual list using the Fixed Options List feature.
• Query only the necessary fields for search performance.