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.
  Options defined here will not be used if the Options Data Store is defined below.
• Or Choose Options Data Store: Select an Options Data Store plugin to populate options dynamically.
  Upon selecting an option, the option Label will be used in this text field.
  To also store the Value of your selection, select a field ID for Field ID to Store Selection Value property.

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.
  When will validation take place?
  Validation will occur whenever a form is submitted, except when submitted as Save as Draft.

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.
  Using a non-existent Workflow Variable name
  You will get a warning with the name printed out (e.g., status) in the server log if you attempt to map to a non-existent Workflow Variable.
  

  context attribute status does not exist in process context - adding new attributes to the process context is not allowed

  .prop

Download plugin

• Autocomplete Text Field Plugin