jQuery Chosen Plugin

Chosen is a jquery plugin is used to enhance the look and functionality of HTML select boxes. Some of the key features of the selected jQuery plugin are Searchable Dropdowns,Multiple Selections and Keyboard Navigation.

1.Chosen - Single Select Dropdown.

Here is a simple example of a single select dropdown

Example

<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
    </head>
    <body>
        <select class="chosen-select">
            <option value="">Select Course</option>
            <option value="HTML">HTML</option>
            <option value="CSS">CSS</option>
            <option value="JavaScript">JavaScript</option>
            <option value="JQuery">JQuery</option>
            <option value="Python">Python</option>
        </select>
        <script>
            $(document).ready(function(){
                $(".chosen-select").chosen({
                    no_results_text: "No match found!", 
                    width: "200px",
                });
            }); 
        </script>
    </body>
</html>

2.Chosen - Multiple Select Dropdown

Here is a simple example of a multi-select dropdown.

<select class="chosen-select" multiple>
    <option value="">Select Course</option>
    <option value="HTML">HTML</option>
    <option value="CSS">CSS</option>
    <option value="JavaScript">JavaScript</option>
    <option value="JQuery">JQuery</option>
    <option value="Python">Python</option>
</select>
<script>
    $(document).ready(function(){
        $(".chosen-select").chosen({
            width: "200px%"
        });
    }); 
</script>

3.Chosen - Update dropdown

Here is a simple example of adding a new item to the dropdown.

<p>
    <input type='text' id='course' placeholder='Enter Course Name' >
    <button id="btn_add_course">Add New Course</button>
</p>
<select class="chosen-select">
    <option value="">Select Course</option>
    <option value="HTML">HTML</option>
    <option value="CSS">CSS</option>
</select>
<script>
    $(document).ready(function(){
        $(".chosen-select").chosen({width:"200px"});
        
        $("#btn_add_course").click(function() {
        
            let course = $("#course").val();
            if(course!=""){
                $(".chosen-select").append('<option value="'+course+'">'+course+'</option>');
                $(".chosen-select").trigger("chosen:updated");
                
                $("#course").val("")
            }
        });
    }); 
</script>