Field Autocompletion

You can configure form field autocompletion in the Forms application:

Autocompletion Type Configuration Field Types
Manual Type a list of autocompletion options Text
Data Provider Call an API to provide autocompletion options Text
Browser Autocompletion Configure the autocomplete HTML attribute Date
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.

Ask

Capabilities

Product

DXP

Contact Us

Connect

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