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

Post a Comment

Popular posts from this blog

Just Maths - Views, View Groups and Layouts

Create Dynamic Table In JavaScript Using WebMethod And jQuery AJAX Without Postback