Create Auto Complete Dropdown using HTML5 Datalist Without JQuery
Here's is a quick way of implementing Auto-Complete in your webpage. Auto-Complete dropdowns are some textbox type looking elements on webpage. When you type on these textboxes you will be prompted with value options just like in dropdowns. The good part of using this method is you need not to using any jQuery for this. The bad part is this will only work in modern browsers which support HTML5.
What We Will Use?
To create the auto-complete feature we will be requiring:
- A plain html input textbox
- A datalist which is a newly introduced tag in HTML5.
- And a webpage of-course
How We Will Do It?
Assuming that you already have a webpage with an html textbox. All you have to do is place a <datalist> tag with multiple option set that you want to be present in your auto-complete dropdown.
Have a look on the below HTML structure.
Now try out your own autocomplete dropdowns and let us know for any issues. One thing that I mentioned earlier which is very important that this technique will only work on modern HTML5 supporting browsers. Keep a check on that :)
For those interested in watching hands-on of this topic, do watch our video below. Subscribe to CheezyCode for more videos.
Interested in Learning C#, follow our step by step C# tutorials here