CODEWITHSUNDEEP
jqueryjquery-pluginsjquery-chosen
Shawn Spencer
Shawn Spencer

Reputation: 1460

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

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

Upvotes: 7

Views: 24672

Answers (7)

rpeh
rpeh

Reputation: 17

The documentation on Chosen options includes:

If your select is hidden when Chosen is instantiated, you must specify a width or the select will show up with a width of 0.

To avoid a zero-width field appearing, you need to use the "width" option, or make sure your original Select is visible when you call Chosen.

Upvotes: 1

Sangram Singh
Sangram Singh

Reputation: 7191

wrap the jQuery code inside :-

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

Upvotes: 1

Adriano
Adriano

Reputation: 20041

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

Upvotes: 5

user2909409
user2909409

Reputation: 11

Ran into a similar problem. I wasn't able to figure out what was causing it by in my situation this worked:

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

    }, 
    function(){
         //remove event
    });

Upvotes: 1

Aaron Hill
Aaron Hill

Reputation: 641

Try removing the size="1" attribute from the select box and/or setting a style attribute with a larger width. Chosen bases the width of the generated elements on the width of the underlying select box so if your select box is very small, the Chosen select will be as well. Hope that helps.

Upvotes: 1

WEFX
WEFX

Reputation: 8572

When you populate the field dynamically, is the JSON result set coming back w/ "Text" and "Value" attributes? If it's not, Chosen will not format the results properly within its list. In fact, it won't add them at all. I learned this the hard way because my results were initially coming back w/ "Name" and "ID" attributes instead.

Upvotes: 1

Sinetheta
Sinetheta

Reputation: 9449

you have to target the select

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

jsFiddle

Upvotes: 1

Related Questions