Use Chosen JQuery Plugin In MVC Asp Net

I would to install Chosen javascript jquery plugin in a AspNet project. I have followed this step: 1- under Scripts directory I have added all the javascript file as the image belo

Solution 1:

thank you for your answer, now is working. I would like to share step by step the procedure that I have followed:

1. Download Chosen from website https://github.com/harvesthq/chosen, in my case chosen_v1.8.2

2. Create and populate the directory inside the ASP-NET project as follow

   Scripts/chosen put here all the file in \chosen_v1.8.2 Scripts/chosen/docsupport put here all the file in \chosen_v1.8.2\docsupport

   5- Update /App_Start/ BundleConfig.cs

//add chosen script

bundles.Add(new ScriptBundle("~/bundles/chosen").Include(
    "~/Scripts/chosen/chosen.jquery.min.js",
    "~/Scripts/chosen/chosen.jquery.js",
    "~/Scripts/chosen/docsupport/prism.js",
    "~/Scripts/chosen/docsupport/init.js"

3. Update /shared/Layout.cshtml

After jquery add the chosen bundle

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/chosen")

Update /shared/Layout.cshtml Add after jquery the chosen bundle

5.Update index.cshtml with some samples

...

  <script type="text/javascript">
        $(document).ready(function () {
            $("select").chosen();
            $("chosen-select-width").chosen();

       });
    </script>

<h2><a name="custom-width-support" class="anchor" href="#custom-width-support">Select the shop</a></h2>
<div class="side-by-side clearfix">
    <p>Using a custom width with Chosen is as easy as passing an option when you create Chosen:</p>
    <pre><code class="language-javascript"> $(".chosen-select").chosen({width: "95%"}); </code></pre>
    <div>
        <em>Multiple Select Shop id</em>
        <select data-placeholder="Your Favorite Types of Bear" multiple class="chosen-select-width" tabindex="16">
            <option value=""></option>
            <option selected>Test1</option>
            <option>Test2</option>
            <option>Test3</option>
        </select>
    </div>
</div>

7 Enjoy

Solution 2:

You have to actually initialize the chosen library on your select component. This is best done in the document ready event to make sure the library is loaded.

By for example adding this in your html code:

<script>
    $(function() {
        $("select").chosen();
    });
</script>