How to use Chosen jQuery plugin

By FoxLearn 3/18/2020 11:01:05 AM 5.92K

This post shows you How to implement chosen jquery plugin.

Chosen jQuery plugin is a javascript framework helps you manage select box and help us have a better user experience.

First, you need to download chosen jquery

You can also download and install it from cdn chosen jquery by using Visual Studio.

Right-clicking on your folder => Add => Client-Side Library...

visual studio add client side library

Searching the library that you want to install.

After extracting the downloaded file, you need to copy the following necessary files to the project:

1. chosen.min.css
2. chosen.jquery.min.js
3. chosen-sprite.png
4. [email protected]

Creating a new html file as shown below.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="lib/chosen/chosen.min.css" />
</head>
<body>
    <select data-placeholder="Select..." class="chosen-select">
        <option hidden selected value=""></option>
        <option value="1">C#</option>
        <option value="2">C++</option>
        <option value="3">Java</option>
        <option value="4">Javascript</option>
        <option value="5">HTML</option>
        <option value="6">MySql</option>
        <option value="7">Sql Server</option>
    </select>
    <script src="lib/jquery/dist/jquery.min.js"></script>
    <script src="lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="lib/chosen/chosen.jquery.min.js"></script>
    <script type="text/javascript">
        $(".chosen-select").chosen({
            allow_single_deselect: true,
            width: '20%',
        });
    </script>
</body>
</html>

Adding chosen-select class to help you implement chosen option jquery.

chosen.jquery

data-placeholder="Select..." (This is the placeholder to display when nothing is selected)

allow_single_deselect: true (Display the x icon, allows you to delete the selected value, the condition of use is the first <option> tag must be empty)

width: '20%' (set width)

disable_search_threshold: 10 (Disable search, if there are less than or equal to 10 results, otherwise display search box)

no_results_text: 'Not found' (Displays a message not found looking up value)

rtl: true (Display results to the right)

If you want to select multiple value you can modify your html code as shown below.

chosen.jquery multiple select

<select multiple data-placeholder="Select..." class="chosen-select">
    <option hidden selected value=""></option>
    <option value="1">C#</option>
    <option value="2">C++</option>
    <option value="3">Java</option>
    <option value="4">Javascript</option>
    <option value="5">HTML</option>
    <option value="6">MySql</option>
    <option value="7">Sql Server</option>
</select>

As you can see, This is a useful library, it helps us to easily manipulate dropdown list.