Struct Datalist 

pub struct Datalist;

The <datalist> element - contains a set of predefined options for other controls.

Purpose

The <datalist> element provides a list of predefined options for an <input> element. It creates an autocomplete or suggestion feature where users can either select from the list or type their own value. Offers flexibility between free-form input and selection.

Content Categories

• Flow Content
• Phrasing Content

Permitted Content Model

• Either: Phrasing content
• Or: Zero or more <option> elements

Common Use Cases

• Autocomplete suggestions for text inputs
• Common value suggestions with custom input allowed
• Search suggestions
• Product or category suggestions
• Location or address suggestions

Key Attributes

• id: ID referenced by input’s list attribute (required)

Example

<!-- Basic datalist for text input -->
<label for="browser">Choose a browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

<!-- Datalist with labels -->
<label for="ice-cream">Favorite ice cream:</label>
<input list="ice-cream-flavors" id="ice-cream" name="ice-cream">
<datalist id="ice-cream-flavors">
  <option value="Chocolate">Rich chocolate</option>
  <option value="Vanilla">Classic vanilla</option>
  <option value="Strawberry">Fresh strawberry</option>
</datalist>

<!-- Datalist for email with common domains -->
<label for="email">Email:</label>
<input type="email" list="email-domains" id="email" name="email">
<datalist id="email-domains">
  <option value="user@gmail.com">
  <option value="user@yahoo.com">
  <option value="user@outlook.com">
</datalist>

<!-- Datalist for search -->
<label for="search">Search:</label>
<input type="search" list="recent-searches" id="search" name="q">
<datalist id="recent-searches">
  <option value="HTML tutorials">
  <option value="CSS grid layout">
  <option value="JavaScript async">
</datalist>

<!-- Datalist for URL input -->
<label for="website">Website:</label>
<input type="url" list="popular-sites" id="website" name="website">
<datalist id="popular-sites">
  <option value="https://github.com">
  <option value="https://stackoverflow.com">
  <option value="https://developer.mozilla.org">
</datalist>

Accessibility

• Options are announced to screen readers as suggestions
• Users can still type custom values
• Works with standard input accessibility features
• Provide meaningful option values

WHATWG Specification

• 4.10.8 The datalist element

Trait Implementations

impl HtmlElement for Datalist

const TAG: &'static str = "datalist"

The HTML tag name (e.g., “div”, “span”, “img”).

const VOID: bool = false

Whether this is a void element (self-closing, no children allowed).

impl CanContain<Option_> for Datalist

impl<T: PhrasingContent> CanContain<T> for Datalist

impl FlowContent for Datalist

impl PhrasingContent for Datalist