Datalist FieldType

The Datalist FieldType allows you to integrate HTML <datalist> input fields into your ExpressionEngine Channel Entry forms. It adheres to the HTML Data List specification, enabling authors to select from pre-defined options or enter custom values as needed.

Summary

Typical Use Cases

Suggestion/Ahead-of-Time Input

• Great for giving content authors helpful suggestions without restricting them entirely to pre-set options.

Tag or Category Entry

• Useful when entries belong to loosely controlled vocabularies—e.g., product tags, city names, or author names—while still allowing manual input.

Features

HTML <datalist> Integration

• Provides a text input paired with a <datalist> dropdown, letting users choose from suggestions or enter free-form text. A basic example looks like this:

<input list="__my_list" type='text' name="my_list" id="my_list" value="5" />
<datalist id=__my_list">
    <option value="1">One</value>
    <option value="2">Two</value>
    <option value="3">Three</value>
    <option value="4">Four</value>
    <option value="5">Five</value>
</datalist>

Compatibility with Key EE FieldTypes

Works smoothly within:

• Channel Entries
• Members
• Grid FieldType
• Fluid FieldType
• Seeder by CartThrob
• Unit Tests

:label Modifier

• When you want to display the option label instead of its value in templates, append :label to the field’s variable. {my_field_name:label} This will render the human-readable label corresponding to the chosen value.

How It Helps

• Enhances the authoring experience by combining suggestions with flexibility.

Makes Maintenance Easier

• With a consistent test environment, it's easier to upgrade ExpressionEngine versions or PHP without breaking existing functionality.
• Encourages consistency in input while preserving the option for creativity or edge cases.
• Integrates seamlessly with structured field systems like Grid and Fluid for organized data entry.

Modifiers

:label

Will output the label instead of the value for the field.

Example

{my_field_name:label}