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

Question

Has anyone used and configured some basic selected.js code?

I downloaded js, css and png, copied some code from the examples, wrote my own super-simple example, but I have to miss something. I checked that the .jquery.js code is included and loading, the same with the selected .css.

When I try to call even a very simple SELECT field (drop-down menu), I get a very small field, and clicking on the field does nothing. When I turn off selected.js, I just get a SELECT with all the options displayed.

Here, as I add a simple SELECT to jQuery (I have to populate the field dynamically, although in this example it is all hardcoded):

$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, when I show the modal dialog box containing the parameters, 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 works. This is probably something very stupid, for example, a half-column missing somewhere, but I spent so much time on this “10-minute implementation” that I need to ask for help.

https://github.com/harvesthq/chosen

Answer 1

If you really want to test the “simplest” example, I would suggest:

• Working with hard-coded HTML (vs dynamically added html)
• Remove all attributes from the select element
• Add attributes only to the select element only after the base example is working fine.

Note that the multiple="multiple" attribute in the select element makes the chosen.js behavior different.

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

And it works great.

I suspect that the problem is not in the chosen.js library, but in how you use it (the wrapper inside some basic jQuery onready function is missing or still).

Please note that in my working jsFiddle examples, I only included chosen.css and chosen.jquery.js .

note: get the urls of these files (javascript and css) from http://cdnjs.com/libraries/chosen

Answer 2

you need to target your choice

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

jsFiddle

Answer 3

When you populate a field dynamically, does the JSON result set return with the Text and Value attributes? If this is not the case, Chosen will not properly format the results on his list. In fact, he will not add them at all. I learned this because my results initially returned back to the "Name" and "ID" attributes.

Answer 4

Try to remove the attribute size = "1" from the selection field and / or set the style attribute with a larger width. The selected base forms the width of the generated elements across the width of the base selection block, so if the selection field is very small, the selected selection will also be. Hope this helps.

Answer 5

wrap jQuery code inside: -

 $(document).ready(function(){ $('.chosenElement').chosen(); }); 

Answer 6

Moved to a similar problem. I could not understand what caused this in my situation:

 $j('select').livequery( function(){ $j(this).chosen({width: "300"}); $j('.search-field input').height(14); }, function(){ //remove event }); 

Answer 7

In the documentation for the selected parameters:

If your choice is hidden when creating the Chosen instance, you must specify the width or the selection will be displayed with a width of 0.

To avoid the appearance of a zero-width field, you need to use the "width" parameter or make sure that your original selection is displayed when you call the "Favorites".