How to Build Native HTML Autocomplete Search

Ferenc Almasi • 🔄 2021 April 29 • 📖 1 min read

To create a native autocomplete search in HTML, you can use the datalist tag with a set of options attached to an inputelement. For example:

<label for="tech">Choose your tech:</label>
<input list="techlist" name="tech" id="tech" />

<datalist id="techlist">
    <option value="HTML">
    <option value="CSS">
    <option value="JS">
</datalist>

Note that the id of the datalist must match the list attribute on an input element.

You can try the behavior with the input below:

Currently, it has partial support on the latest versions of IE and Firefox, while other latest versions of major browsers are well supported.

10 Best Practices for HTML

To help you improve your site’s performance and SEO

Following these 10 best practices for html will help you step up your html game and get your site ranked higher, leading to more traffic...Learn More

Resources:

• Data List element - MDN
• Support table for the datalist tag

Want to get weekly updates to your mailbox? 📬

Subscribe to our newsletter! Unsubscribe anytime.

We don't spam. You will only receive information relevant to you.

Receive Weekly Webtips Please provide a valid email address. You are already subscribed to our newsletter. 🎉 Thank you for subscribing to our newsletter. Check your inbox to confirm your email address.

📚 Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕

Get access

Courses

Complete JavaScript Course

Build a Real World App from Scratch

Educative • 📚 277 lessons • 👨‍💻 309 code snippets

React for Front-End Developers

Learn all the React fundamentals you need to know to get you above the ground

Educative • 📚 185 lessons • 👨‍💻 633 code snippets

Become a Front End Developer

Build real-world projects

Educative • 📚 166 lessons • 👨‍💻 346 code snippets

Recommended

How to Make Native HTML Tooltips

Ferenc Almasi • 2021 April 29 • 📖 4 min read

How to Create an Accordion Using Only HTML and CSS

Build accordions natively without JavaScript

Ferenc Almasi • 2021 April 28 • 📖 3 min read

How to Define Keyboard Inputs in HTML

Ferenc Almasi • 2021 April 28 • 📖 1 min read

Read more on