Tutorial - Native HTML5 autocomplete with datalist
Published 10 October 2014 in London, UK
The <datalist> element has pretty OK support, so you should be ok reading this post if you’re on Chrome >= 20, Firefox >= 4, IE >= 10 or Opera >= 9.5. If not though, this is what we’re going for
No plugins! As you can see it's a regular input with a little dropdown attached to it.
This is really easy. First, you’re gonna need a regular ol’ <input type="text"> element, and let’s give it a label just because.
Now we add the new element, datalist. It needs an ID so we can hook it up to the <input>. Put it above the <input>, because it looks better there. While you’re at it, add the list attribute to your <input> so it points at the <datalist> we created.