How To Create Dropdown With Search

Submitted by alpha_luna on Saturday, April 9, 2016 - 10:36.

Nowadays, a search is a very helpful material in terms of searching on the internet. Also, it is very useful feature for the HTML source code in the function of a simple dropdown. This is a user-friendly kind of function. In this tutorial, we are going learn about on How to Create Dropdown with Search with the help of jQuery script. With the use of this script, the simple dropdown will expand the function to be a searchable tool. We are going to list new movies in 2016 in the (select) element of dropdown with a search. There’s a lot of movies, we only have 10 to 15 example but you can edit after you download the source code.

Dropdown with Search

This source code composes of (select) element insert by the id attribute.

<!DOCTYPE html>
<html>
<head>
 
        <title>
                How to Create Dropdown with Search
        </title>
        <javascript><script src="js/code_js1.js" type="text/javascript"></script>
        
        <script src="js/code_js.js"></script>
        
        <script type="text/javascript">
                $(document).ready(function() {
                        var new_movies = ["God's Not Dead 2", "Captain America: Civil War", "Love Games", "The Huntsman: Winter's War", "The Jungle Book", "Ki & Ka", 
                        "Meet the Blacks", "Rocky Handsome", "Kapoor and Sons", "Miracles from Heaven", "Eye in the Sky",
                        "Zootopia", "I Saw the Light", "London Has Fallen", "Divergent Series: Allegiant"];
                        $("#new_movies").select2({
                          data: new_movies
                        });
                });
        </script><javascript>
 
        <link href="css/code_css.css" rel="stylesheet" />               
</head>
<body>
 
<center>
        <h1>How to Create Dropdown with Search</h1>
                <div>
                        <select id="new_movies" style="width:300px;"></select>
                </div>
</center>
 
</body>
 
</html>

This is a static data and we can also get the data into the database to become dynamic. There are many features for dropdown list search and you can add after you download the source code below. Share us your thoughts and comments below. Thank you so much for dropping by and reading this blog post. For more updates, don’t hesitate and feel free to visit our website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you.

Add new comment

363 views