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.

<!DOCTYPE html>
<html>
<head>
<!--your stuff-->
</head>
<body>
<!--your stuff-->
<input type="text" id="txtAutoComplete" list="languageList"/><!--your input textbox-->
<datalist id="languageList">
<option value="HTML" />
<option value="CSS" />
<option value="JavaScript" />
<option value="SQL" />
<option value="PHP" />
<option value="jQuery" />
<option value="Bootstrap" />
<option value="Angular" />
<option value="ASP.NET" />
<option value="XML" />
</datalist>
</body>
</html>

Notice that the id of the datalist is mentioned in the 'list' attribute of the textbox. Shown below is the working example of the above mentioned auto-complete. Just type 'J' in the below textbox and you will be prompted with two options to choose from i.e. 'JavaScript' & 'jQuery'. Isn't that amazing?



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.



Happy Reading!!!



Interested in Learning C#, follow our step by step C# tutorials here


Comments

  1. When I hit Enter, or Search button, each suggestion should open a specific link, or place the Search word right after a specific link (eg. www.site.com/search/label/INPUT+WORD.. How can I do that?

    Please, this would be just great!

    ReplyDelete
    Replies
    1. You can write a function for this on Search button 'onclick' handler, in that function you and simply write

      window.location = 'www.site.com/search/label/' + 'Value from the textbox';

      Also for enter key either use a 'onsubmit' handler of your html form or read the key code from keypress event.

      Delete
  2. i want to check whether user input only data from suggestion how to do that?

    ReplyDelete
    Replies
    1. You may use onchange/onblur event of textbox. In that event check if the value is not present in datalist, clear the textbox and set the focus back to the textbox.

      Delete
    2. This comment has been removed by the author.

      Delete
  3. OK, is there a way to simulate SELECT tag? I mean to make submitted values be different from the text? I need it to look as it looks, so I can write "Javascript" for egzample, but I need an Id instead of an actual text "Javascript" as a result.

    ReplyDelete
    Replies
    1. It's not feasible straight away till now. As of now you need to mix up some JavaScript to get your desired behavior.

      Delete
  4. I tried several other stuffs using jqueries and i wouldn't waste a lot of time if it's this easy. Thanks a lot mate

    ReplyDelete
  5. A fascinating discussion is definitely worth comment. I do think that you need to write more techno on this topic, it might not be a taboo matter but typically people do not speak about such subjects. To the next! All the best!!

    ReplyDelete
  6. Greetings! Very helpful advice within this post! It is the little changes that will make the biggest changes. Many thanks for sharing KBC Official Winner Website

    ReplyDelete

Post a Comment

Hey there, liked our post. Let us know.

Please don't put promotional links. It doesn't look nice :)

Popular posts from this blog

Create Android Apps - Getting Started

Polymorphism in Kotlin With Example