The <datalist> tag is a powerful element that provides an autocomplete feature for <input> elements. Unlike a select dropdown, users can still type their own value, but they see suggestions.

Step 2

First, we need a standard text input. We add a label so users know what to type. The magic happens with the 'list' attribute on the input. This tells the browser: 'Look for a list with this name'.

<label>Choose a browser:</label>
<input list="browsers" />

Step 3

Now we define the actual list using <datalist>. The most critical part is the 'id'. This MUST match the 'list' attribute value we put in the input tag earlier.

<label>Choose a browser:</label>
<input list="browsers" />

<datalist id="browsers">

Step 4

Checkpoint: Which attribute connects the input to the datalist?

<input list="colors" />
<datalist id="colors">...</datalist>

Step 5

Inside the datalist, we add <option> tags. We usually just provide a 'value'. These options will appear as suggestions when the user clicks or types in the input box.

<label>Choose a browser:</label>
<input list="browsers" />

<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>

Step 6

This is the result. Notice the arrow on the input field? When you type 'C', it suggests 'Chrome'. If you type something new like 'Brave', it accepts that too!

<label>Choose a browser:</label>
<input list="browsers" placeholder="Type here..." />
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>

Step 7

Checkpoint: Can a user type a value NOT in the list?

Step 8

Great job! You've mastered the <datalist>. It's perfect for search bars, country selectors, or anywhere you want to guide the user but not restrict them.

<h1>Completed!</h1>

Step 9

Now apply what you've learned. Check the challenges below to earn XP and unlock the Autocomplete Ace achievement!

datalist.html

1 / 9

📋

Tutor:The <datalist> tag is a powerful element that provides an autocomplete feature for <input> elements. Unlike a select dropdown, users can still type their own value, but they see suggestions.

⭐ 0 EXP

Datalist Mastery

Unlock nodes by learning the syntax.

Concept 1: The Input

Start with a standard text input. The key difference is adding the list attribute, which points to the list you will create later.

System Check

Which attribute is added to the <input> tag?

srclisthrefdata

Community Holo-Net

Showcase Your Autocomplete

Built a cool search bar or filter using datalist? Share your code snippets.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML Datalist: The Native Autocomplete

Pascual Vila

Frontend Instructor.

The <datalist> element is one of the most underappreciated tags in HTML. It allows you to create a lightweight, native autocomplete feature without requiring complex JavaScript libraries.

Datalist vs. Select

With a standard <select> dropdown, the user is forced to choose one of the options you provide. With <datalist>, you are providing suggestions, but the user is free to type something else completely. It is a hybrid between a text input and a dropdown.

The Connection (List & ID)

The most common mistake developers make is forgetting to link the two elements. The <input> must have a list attribute, and that value must exactly match the id of the <datalist>.

Browser Support

Datalist is supported in all modern browsers. It provides a consistent OS-level UI for selecting options, which is often more accessible than custom JavaScript implementations.

Datalist Glossary

<datalist>: The container tag for the options. It is invisible by default and only appears when linked to an active input.
list attribute: An attribute placed on the <input> tag. It points to the ID of the datalist you want to use.
<option>: Defines an item in the list. In a datalist context, it usually only needs a value attribute.

📖 INDEX