← Back to HTML Course | Chapter 10: Reference & Interview Prep | Lesson 15 of 20

HTML Datalist

Typing the same value over and over is tedious, and remembering an exact spelling can be hard too. The <datalist> element solves this by attaching a list of suggested values to a normal text input, similar to a search engine's autocomplete suggestions. Unlike a dropdown <select>, a datalist does not force visitors to pick only from the list. They can still type any value they want, but as they type, the browser shows matching suggestions to speed things up and reduce spelling mistakes. This makes <datalist> ideal for fields like country names, product categories, or search boxes, where guiding visitors toward common answers is helpful, but locking them into a fixed set of choices is not necessary.

In this page:

  1. What Is <datalist>?
  2. Connecting a Datalist to an Input
  3. Populating Datalist Options Dynamically
  4. Datalist vs Select Dropdown
  5. Browser Behavior and Limitations
Syntax
markup 
<input list="listid">
<datalist id="listid">
  <option value="value">
</datalist>

What Is <datalist>?

The <datalist> element defines a set of predefined <option> values that can be suggested to a visitor while they type into a connected text input, without restricting them to only those choices.

Note:
  • Think of datalist suggestions as helpful shortcuts, not a strict set of allowed answers.
  • Accepted attributes:
  • datalist id — referenced by the input list attribute
  • option value — suggested value
  • option label — optional text
Warning: A datalist with no connected input has no visible effect on the page at all.

Example: What Is <datalist>?

markup 
<input list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
</datalist>

Connecting a Datalist to an Input

The connection between an input and its suggestions relies entirely on the input's list attribute matching the datalist's id. Once linked, the browser automatically shows the datalist's options as the visitor types.

Note:
  • Give the datalist a descriptive, unique id so it is easy to trace which input it belongs to in larger forms.
  • Accepted values:
  • list — the id of a datalist element
  • Works with text, search, url, tel, email, number, date, color, range
Warning: A mismatched list and id pair is a silent failure; no error appears, the suggestions simply never show.

Example: Connecting a Datalist to an Input

markup 
<input list="fruits" name="fruit">
<datalist id="fruits">
  <option value="Apple">
  <option value="Banana">
</datalist>

Populating Datalist Options Dynamically

Datalist options do not have to be fixed in the HTML source; they can be added or replaced with JavaScript, which is useful for suggestions that come from a search API or change based on visitor activity.

Note: Debounce network requests when building suggestions from an API, so you are not sending a request on every single keystroke.
Warning: Clearing and rebuilding a large number of options frequently can cause a noticeable flicker in the suggestion list.

Example: Populating Datalist Options Dynamically

markup 
<input list="results" id="search">
<datalist id="results"></datalist>
<script>
  document.getElementById('results').innerHTML = '<option value="Apple">';
</script>

Datalist vs Select Dropdown

A <select> dropdown restricts visitors to only the listed options, while a <datalist> merely suggests values and still accepts any free-typed text. Choosing between them depends on whether flexibility or strict validation matters more.

Note: Use <select> when only a fixed set of answers is valid, and <datalist> when guiding visitors is helpful but free text should still be accepted.
Warning: Using <datalist> when strict validation is required means invalid values must still be caught separately, since the datalist itself does not enforce them.

Example: Datalist vs Select Dropdown

markup 
<select>
  <option value="Small">Small</option>
</select>
<input list="sizes">
<datalist id="sizes">
  <option value="Small">
</datalist>

Browser Behavior and Limitations

While every modern browser supports <datalist>, the exact appearance of the suggestion dropdown, and how many options are shown at once, can differ slightly between browsers and devices.

Note: Test your datalist on a few different browsers to confirm the suggestion list looks and behaves the way you expect.
Warning: Some mobile browsers display datalist suggestions differently than desktop browsers, so always check the experience on a phone or tablet too.

Example: Browser Behavior and Limitations

markup 
<input list="colors">
<datalist id="colors">
  <option value="Red">
  <option value="Blue">
</datalist>
Live Example
Related Topics

HTML Output Element · HTML Image Maps · HTML Progress & Meter · HTML Browser DevTools

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Forgetting to connect the input and datalist with a matching list attribute and id, so no suggestions appear.
  2. Assuming a datalist restricts input to only the listed values, when visitors can still type anything they like.
  3. Populating a datalist with too many options, making the suggestion list overwhelming instead of helpful.
Chapter Summary
  • The <datalist> element provides a list of suggested values for a connected text input.
  • An input is connected to a datalist using a matching list attribute and the datalist's id.
  • Unlike <select>, a datalist never restricts the visitor to only the suggested values.
Browser Support

The <datalist> element is supported by all modern browsers, though the exact suggestion appearance can vary slightly between them.

🔒

Chapter Quiz — Complete all 20 topics to unlock

0/20 topics done

Complete these topics first:

← Previous Lesson HTML Output Element Next Lesson → HTML Image Maps

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.