How to Build Native HTML Autocomplete Search

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 HTMLTo help you improve your site’s performance and SEOFollowing 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

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

Looking to improve your skills? Check out our interactive course to master HTML from start to finish.

---

Resources:

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