AutoComplete without jQuery? Just HTML5!

Sometimes you want to add AutoComplete functionality to your web application, then you begin to search the internet for the simplest way to achieve it, or you simply search your code library to reuse an existing one with some modifications to suite your need.

Since the introduction of HTML5, I have stopped bothering myself searching for AutoComplete plugins. So, I stick to the simple way to achieve the same without wasting time.

You probably don’t believe this is possible! Anyway, it is and this is how it’s doneā€¦

HTML5 introduced few bunch of new tags to ease web development to achieve a lot of things we use jQuery for. In this article, I am going to use the HTML5 datalist tag to achieve this. Just follow the steps below to see the magical results you will get.

Step 1: Launch your favourite code editor

Step2: Create an HTML page with the following content

AutoCompleteWithoutjQuery

Step 3: See the result on your web browser!

OutputOnYourBrowser

I am sure you are relieved now!

Point of Interest

This method avoids several server request each time a user types in the textbox using the “old” traditional jQuery plugins!

You can dynamically populate the list using any server side language of your choice.

 

Don’t forget to add your comment below to enable me hear your view!

Have fun!

2 thoughts on “AutoComplete without jQuery? Just HTML5!

Leave a Reply

Your email address will not be published. Required fields are marked *