Autocomplete Text Field Form Element
Introduction
The Autocomplete Text Field Form Element plugin enhances your Joget forms with a text field that can dynamically load options via AJAX based on user input. This feature streamlines the user experience by providing suggestions as the user types.
The source code for this plugin is available on JogetOSS Github, where you can clone and customize it to suit your specific needs.
Get started
Configure autocomplete text field properties
Go to select Form Builder > Autocomplete Text Field in the elements Marketplace section and fields configure need.
Edit autocomplete text field
Fields to configure:
- ID: Define the element ID. This creates a corresponding database table column (e.g., c_title if the ID is title).
See Form Element for more information about defining the ID and list of reserved IDs. - Label: Enter the label to be displayed to the end-user.
- Field ID to Store Selection Value: Specify the ID of an existing form element to store the selected option's Value.
- Options (Hardcoded): Define static options if no dynamic Options Data Store is used.
- Or Choose Options Data Store: Select an Options Data Store plugin to populate options dynamically.
Advanced options
Data
Fields to configure:
- Value: Default Value when no existing value is found.
A hash variable is accepted here. For example, you may key the following to pre-populate the field with the currently logged-in user's name.
#currentUser.fullName#
- Validator: Attach a validator plugin to ensure input data is valid.
UI
Fields to configure:
- Size (Rows): Define the width of the element.
- Readonly: Mark the element as read-only if needed.
- Display Field as Label When Readonly?: Choose whether to display the field's value as plain text when set to readonly.
Workflow
Field to configure:
- Workflow Variable: If the form is part of a workflow process, upon saving the form by clicking the Save as Draft or Complete button, the value in this input field will be saved into the corresponding workflow variable named in this field.