chosen jquery plugin basic ui does not work

I want to use chosen jquery plugin just like the same example that they use in the official website: http://harvesthq.github.io/chosen/

enter image description here

These are my files:

enter image description here

This is index.html:

<html>
    <body>
        <head>
            <script src="jquery-1.9.1.js"></script>
            <script src="chosen.jquery.js"></script>
            <link rel="stylesheet" href="chosen.css">
        </head>
        <body>
            <script type="text/javascript">
                $(".chosen-select").chosen()
            </script>


            <select class="chosen-select" tabindex="8" multiple="" style="width:350px;" data-placeholder="Your Favorite Types of Bear">
                <option value=""></option>
                <option>American Black Bear</option>
                <option>Asiatic Black Bear</option>
                <option>Brown Bear</option>
                <option>Giant Panda</option>
                <option selected="">Sloth Bear</option>
                <option disabled="">Sun Bear</option>
                <option selected="">Polar Bear</option>
                <option disabled="">Spectacled Bear</option>
            </select>
        </body>
    </body>
</html>

Result looks like this:

enter image description here

Is wrong? I saw the html code generated by the official page and it was not the same. When I changed my code to this one:

<html>
    <head>
        <script src="jquery-1.9.1.js"></script>
        <script src="chosen.jquery.js"></script>
        <link rel="stylesheet" href="chosen.css">

        <script type="text/javascript">
            $(".chosen-select").chosen()
        </script>
    </head>
    <body>
        <select data-placeholder="Your Favorite Types of Bear" style="width:350px; display:none" multiple class="chosen-select" tabindex="-1">
            <option value=""></option>
            <option>American Black Bear</option>
            <option>Asiatic Black Bear</option>
            <option>Brown Bear</option>
            <option>Giant Panda</option>
            <option selected>Sloth Bear</option>
            <option disabled>Sun Bear</option>
            <option selected>Polar Bear</option>
            <option disabled>Spectacled Bear</option>
        </select>

        <div class="chosen-container chosen-container-multi" style="width: 350px;" title="">
            <ul class="chosen-choices">
                <li class="search-field">
                    <input class="default" type="text" style="width: 183px;" autocomplete="off" value="Your Favorite Types of Bear" tabindex="8">
                </li>
            </ul>

            <div class="chosen-drop">
                <ul class="chosen-results">
                    <li class="active-result" data-option-array-index="1" style="">American Black Bear</li>
                    <li class="active-result" data-option-array-index="2" style="">Asiatic Black Bear</li>
                    <li class="active-result" data-option-array-index="3" style="">Brown Bear</li>
                    <li class="active-result" data-option-array-index="4" style="">Giant Panda</li>
                    <li class="active-result" data-option-array-index="5" style="">Sloth Bear</li>
                    <li class="disabled-result" data-option-array-index="6" style="">Sun Bear</li>
                    <li class="active-result" data-option-array-index="7" style="">Polar Bear</li>
                    <li class="disabled-result" data-option-array-index="8" style="">Spectacled Bear</li>
                </ul>
            </div>
        </div>          
    </body>
</html>

I got this:

enter image description here

Do I need to do something else to get the same result of the official example?

chosen jquery plugin basic ui does not work

2 Answers