jQuery Chosen plugin: customize/format text of opt

Question

I'm using a plugin in jquery called chosen for a select box with an autocomplete feature. http://harvesthq.github.com/chosen/

Where can I format the text of the options in the select box?

Is there a method in the chosen plugin for this? I've read the documentation and scanned the code but can't seem to find it.

Here is a screenshot of what I want to achieve. (this is made with another plugin 'selectmenu' but I want to do the same using 'chosen')

Answer 1

Here is another way to do it for now...

You can add special characters that will still look okay in a normal select, but not normally appear in the text. For example TITLE :: Description. Then find the :: and format using that. This example is designed for single select. For multiple you would probably just have to change the .chosen-single, or use another way to select it.

$('select[name="SELECT_NAME"]')
    .chosen({search_contains: true})
    .add('.chosen-search')
    .on('chosen:showing_dropdown keyup change', function() {
    $('.chosen-results .active-result, .chosen-single span').html(function() {
        var html = $(this).html();
        if (/ :: /.test(html)) {
            return '<strong>' + html.replace(' :: ', '</strong> <span style="font-size:70%;display:inline;font-weight: normal;">') + '</span>';
        } else {
            return html;
        }
    });
});

Your result in this example should be <strong>Title</strong> <span style="font-size:70%;display:inline;font-weight: normal;">Description</span>

Answer 2

You can add width as a parameter to chosen

$("field").chosen({ width: '400px' })

Answer 3

There is no such feature at master branch in current time.

But there is this pull-request, wich is immediately what you need (currently it's for jquery only): https://github.com/harvesthq/chosen/pull/692

So you can get code from here. https://github.com/cjstewart88/chosen/tree/templates