chosen.js :: Does anyone have an actual working example?

Question

Has anyone used and customized some basic chosen.js code?

I have downloaded the js, css and png, copied some code from the examples, wrote my own super-simple example, but I must be missing something. I have verified that the code.jquery.js is included and gets loaded, same with the chosen.css.

When I try to bring up even an extremely simple SELECT field (drop-down), I get a very small field, and clicking the field does nothing. When I disable chosen.js, I simply get the SELECT with all the options displayed.

Here's how I add a simple SELECT within jQuery (I have to populate the field dynamically, although in this example it's all hard-coded):

    $html = '<select name="items" id="items" multiple="multiple" size="1" class="chosenElement">';
    $html += '<option value="foo">foo</option>';
    $html += '<option value="bar">bar</option>';
    $html += '<option value="baz">baz</option>';
    $html += '<option value="qux">qux</option>';    
    $html += '</select>';

Then, right when I display the modal dialog box containing the options, I call:

$('.modal-body').html($html);
$('.chosenElement').chosen();

So far, I have modified and tested all kinds of permutations, Googled for solutions or examples, but nothing seems to work. It's probably something very silly, like a missing semi-colon somewhere, but I've wasted so much time on this "10-minute implementation" that I need to ask for soem help.

https://github.com/harvesthq/chosen

Answer 1

If you really want to test the "most basic" example, I'd suggest:

1. Work on hardcoded HTML (vs dynamically added html)
2. Remove all the attributes from the select element
3. Only add back the attributes to the select element once a basic example runs fine.

Note that the multiple="multiple" attribute on the select element does make chosen.js behave differently.

I have ran your code here: http://jsfiddle.net/99Dkm/1/

And it works just fine.

I suspect the problem is not chosen.js library but rather how you use it (wrapping inside some basic jQuery onready function missing or else).

Notice that in my working examples on jsFiddle I only included chosen.css & chosen.jquery.js.

note: get the URLs for those files (javascript & css) from http://cdnjs.com/libraries/chosen

Answer 2

you have to target the select

$('#items').chosen();

jsFiddle