You can configure the following settings in the Properties panel:
Options: You can link the data to be shown in the list. You can also create a static list.
Fixed Options List: Lists manually defined fixed data that is not linked to the database.
Fixed Data: Determines the display name (Text) and the value (Key) to be used in the application for each data that makes up the list.
Placeholder: Placeholder text that is displayed when the user does not enter data.
Allow Clear: Adds a Delete (X) icon on the right margin, allowing one-click deletion of the entered data.
Value: You can add a static value or dynamically display the content of another element or the result of an action via Symbol Picker.
Actions That Can Be Added to Elements
The Auto Complete element supports the definition of event-based actions based on user interactions. Actions are not linked to the element itself, but to events triggered by user inputs and selections.
Actions for the Auto Complete element can be added via the Properties > Add Action area using the following events.
Supported Action Triggers
onSearch: Triggered when the user performs a search. Also works when the search text is cleared.
Purposes:
Dynamically generate a list of suggestions based on the entered text
Filter results by making API calls
Improve search performance in large data sets
Example scenario: As the user types a city name, matching cities are retrieved from the API and displayed in a list.
onSelect: Triggered whenever the user makes a selection.
Uses:
Assign the selected value to a state or variable
Automatically fill in related fields
Update form data
Example scenario: When the user selects a product, the product details are automatically written to the relevant fields.
onChange: Triggered only when the selected item changes.
Uses:
Monitor user input
Display help text or warnings
Update the status of dependent fields
onBlur: Triggered when the user loses focus from the Auto Complete field.
Uses:
Run validation if the field is left blank
Check if the entered value is valid
getTextFromValue: Used to obtain the text to be displayed from the selected value.
Purpose:
To display the correct text in data structures with Value–Label separation
To provide the user with meaningful labels in complex data structures coming from the API
Example scenario: Displaying the First Name and Last Name information as text with user_id as the Value.
Basic Rules Regarding Actions
The Auto Complete element can trigger actions through multiple events.
Multiple actions can be defined for the same event.
When the onSearch event is used intensively, API calls should be carefully planned for performance reasons.
In complex data matching scenarios, it is recommended to use onSelect and getTextFromValue together.
The Auto Complete element provides a powerful and flexible user experience when used with actions, especially in scenarios involving search, filtering, and selection from large data sets.
