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. CheezyCodeMarch 12, 2016 at 8:57 PM

    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.

    ReplyDelete
  2. UnknownMarch 25, 2016 at 12:47 AM

    great....

    ReplyDelete
  3. UnknownJune 8, 2016 at 12:23 PM

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

    ReplyDelete
    Replies
    1. CheezyCodeJune 16, 2016 at 10:46 PM

      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. UnknownOctober 25, 2016 at 12:28 AM

      This comment has been removed by the author.

      Delete
  4. UnknownOctober 25, 2016 at 12:29 AM

    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. CheezyCodeOctober 30, 2016 at 12:02 AM

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

      Delete
  5. UnknownJuly 12, 2018 at 9:54 AM

    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
  6. infoMarch 17, 2020 at 1:19 PM

    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
  7. KBC Lottery 2020June 22, 2020 at 2:34 PM

    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

Image
Cheezy Code - Just Maths App Want to build Android Apps really fast? With Android Studio and a blend of Java and XML, you will be up and running and coding Great Android Apps in no time.  Let's get started. We will be creating a very simple app named Just Maths that will ask user a Maths question. User either presses (✔) or (X) to answer the question. This is going to be a project based learning wherein you will have something concrete in the end.
Read more >>

Kotlin Type Checking and Smart Cast with Examples

Image
  Type Checking in Kotlin For certain scenarios, we need to check the type of the object i.e. we need to identify the class of the object before executing any function on that object. Consider a scenario where you have different types of objects in an array. You are looping on that array and executing some functionality. If you call a method that does not exist in the object, an error will be thrown at the runtime. To prevent such errors, we do type checking. In Kotlin, we have an  " is operator"  that helps in checking the type of the object. fun main() { var p1 = Person() if(p1 is Person) // Use of is operator { p1.sayHi() } } class Person{ fun sayHi() = println("Hi") } Explanation -  Here, we are checking the type of p1 instance that if it is of type Person - call its sayHi() method. In this case, it is evident that the object is of type Person only but for scenarios where we need to check the type - we use an "is operator"....
Read more >>