Field Autocompletion

You can configure form field autocompletion in the Forms application:

Autocompletion TypeConfigurationField Types
ManualType a list of autocompletion optionsText
Data ProviderCall an API to provide autocompletion optionsText
Browser AutocompletionConfigure the autocomplete HTML attributeDate
Numeric
Text

Manual Autocompletion

  1. Go to the Forms application. Open Site Menu Site MenuContent & DataForms.

  2. Add a form and a text field.

  3. In the text field’s configuration sidebar, add the options a user sees while typing in the field.

  4. Save and publish the form, then make sure the autocompletion is working.

    You can add autocomplete options manually.

Autocompletion from a Data Provider

  1. Go to the Forms application. Open Site Menu Site MenuContent & DataForms.

  2. Open Data Providers and add a REST data provider configured like this:

    • Name: REST Countries
    • URL: https://restcountries.com/v3.1/all
    • Output Path: $..name.common
    • Output Type: List
    • Output Label: Country Name

    To understand more about these values, see Data Providers Overview.

  3. Add a form with a text field named Country.

  4. In the field editor sidebar, click Autocomplete.

  5. From the newly appearing options, choose From Data Provider.

  6. Select REST Countries and its output parameter, Country Name.

  7. Save and publish the form.

  8. Go to the form and begin entering data into the field:

    You can autocomplete text fields with a data provider.

Browser Autocompletion

DXP 2024.Q2+; Portal 7.4 GA120+

Browser autocompletion through HTML attributes is available for Date, Numeric, and Text fields.

  1. First, make sure your browser settings have at least one address configured for autofill:

    Configure the autofill information for at least one address in your browser.

    This example uses the Name and Email fields.

  2. Go to the Forms application. Open Site Menu Site MenuContent & DataForms.

  3. Add a form with these fields and configuration:

    Field 1:

    • Label: Name
    • HTML Autocomplete Attribute (Advanced): name

    Field 2:

    • Label: Email
    • HTML Autocomplete Attribute (Advanced): email

    The HTML Attribute setting is in the Advanced tab of the field configuration sidebar.

  4. Save and publish the form.

  5. Go to the form and confirm that autocompletion is working:

    You can autocomplete form fields with the HTML autocomplete attribute.

Autocompletion in form fields can make users more likely to fill out your forms.

Capabilities

Product

Contact Us

Connect

Powered by Liferay
© 2024 Liferay Inc. All Rights Reserved • Privacy Policy