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

...

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

       });
    </script><h2><aname="custom-width-support"class="anchor"href="#custom-width-support">Select the shop</a></h2><divclass="side-by-side clearfix"><p>Using a custom width with Chosen is as easy as passing an option when you create Chosen:</p><pre><codeclass="language-javascript"> $(".chosen-select").chosen({width: "95%"}); </code></pre><div><em>Multiple Select Shop id</em><selectdata-placeholder="Your Favorite Types of Bear"multipleclass="chosen-select-width"tabindex="16"><optionvalue=""></option><optionselected>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>