HTML5 tutorial

How to add an autocomplete dropdown using HTML only and without Javascript

Well! let’s face it jQuery has forever been our go-to library to create an autocomplete dropdown. And rightly so. This has been a life-saver. We’ve used jQuery, we have also heavily used the select-2 library.

But what if I told you HTML5 has for quite sometime now, has had that in-built? Heard of datalist? Yup the lesser known and much ignored <datalist>.

Here’s a quick tutorial on how to create an auto-complete dropdown using only HTML and without using jQuery or any JS at all.

And there you have it. That is all you need to do. The input box will now pull data from the datalist that has “ID” set as “mylist”.

Browser Support:

This works well in Chrome, Firefox, Safari and other chromium browsers and has limited support on Edge as well.