harvesthq / chosen

Deprecated - Chosen is a library for making long, unwieldy select boxes more friendly.

Deprecated

This version of Chosen is not currently under active development while we decide on its future direction.

---

Chosen

Chosen is a library for making long, unwieldy select boxes more user friendly.

• jQuery support: 1.7+
• Prototype support: 1.7+

For documentation, usage, and examples, see: http://harvesthq.github.io/chosen/

For downloads, see: https://github.com/harvesthq/chosen/releases/

Package managers

Chosen is available through Bower, npm, and Composer, however, the package names are not the same.

To install with Bower:

bower install chosen

To install with npm:

npm install chosen-js

To install with Composer:

composer require harvesthq/chosen

The compiled files for these packages are automatically generated and stored in a 2nd Chosen repository. No pull requests will be accepted to that repository.

Contributing to this project

We welcome all to participate in making Chosen the best software it can be. The repository is maintained by only a few people, but has accepted contributions from over 50 authors after reviewing hundreds of pull requests related to thousands of issues. You can help reduce the maintainers' workload (and increase your chance of having an accepted contribution to Chosen) by following the guidelines for contributing.

• Bug reports
• Feature requests
• Pull requests

Chosen Credits

• Concept and development by Patrick Filler for Harvest.
• Design and CSS by Matthew Lettini
• Repository maintained by @pfiller, @kenearley, @stof, @koenpunt, and @tjschuck.
• Chosen includes contributions by many fine folks.

chosen's Issues

Taiwan is not a province of China

In the "Choose a Country" example, Taiwan was marked as a province of China.
However, Taiwan should belong to its own country, "Republic of China".

Dropdown inside a dialog is hidden (scrolled out of view)

With a Chosen enhanced select in a jquery-ui dialog:

<div id="test0">
    <select id="test1">
        <option>First option</option>
        <option>Second option</option>
        <option>Third option</option>
        <option>Fourth option</option>
        <option>Fifth option</option>
    </select>
</div>

$('#test0').dialog(); $('#test1').chosen();

The dropdown for the enhanced select causes the dialog to overflow and some of it is hidden until you scroll it into view.

This can't be fixed by changing the z-index, the dropdown/results list will have to be appended to the body and positioned absolutely...

When javascript is disabled, "blank" option is available.

With diabled javascript, user is allowed to select empty option from the list.

(Opera 11.50)

Text autocomplete/suggestions doesn't list all candidates

Was testing it out on our homepage, http://teaspiller.com.

If you do a search for "Tax" yields a few result, but nothing for "Estates". I think it doesn't work for first word if the term contains a space. It might be because of the added  (spaces) before the terms inside

Any Plans To Support Textarea?

Hey There,

Any plans to support textarea as well? You can insert the object into anywhere within the textarea.

Using callback for large sets

Is there any support for retrieving a resultset by an ajax callback, ie callback on every character input? Populating a select-element with 1000+ option-elements might impact general performance.

Also, the project page states legacy support for IE8, however it seams to work alright even in IE7?

BTW I'm new to github so I'm not sure this is really a space for questions/requests

Thanks

search field scaling fix

I get "call to undefined method on object" in some cases; this fixes it by making sure that "div" is the jquery wrapper around the div and not whatever the return value is from text():

    +++ b/chosen/chosen.jquery.js
    @@ -648,7 +648,8 @@
             }
             div = $('<div />', {
               'style': style_block
    -        }).text(this.search_field.val());
    +        });
    +        div.text(this.search_field.val());
             $('body').append(div);
             w = div.width() + 25;
             div.remove();

chosen.css: z-index issue

Hi,
first of all great piece of code!
There's a small issue with z-index in the default stylesheet:
a.chzn-single gets assigned a z-index of 19 (in line 75 of chosen.css at the time of writing).
This can lead to clashes with other jquery widgets, such as the ui datepicker, which get displayed behind the (closed) dropdown field.
Removing that line and adding

div.chzn-container a.chzn-single-with-drop{

z-index:19;

}

instead seems to fix the issue for me.

There is probably a similar issue with the multiple select box (I think it may be ul.chzn-choices which gets assigned a z-index of 21), but I haven't had a proper look at that yet.

Cheers,
Axel

Feature Request: Highlight options on mouse over

When using the keyboard to navigate between options (up/down arrows), the current option is highlighted.

I would expect the same functionality to exist on mouse hover over options.

Hovering over an option should highlight it.

That is also the default behavior of the native select element in the browser.

Issue with slide show plugin

I am using a slide show plugin (http://jquery.malsup.com/cycle/ ) for my application. But when I plug Chosen plugin into my site then my existing slide show plugin stop working. So I don't know where is problem persisting.

Second Click on Dropdown Arrow

A second click on the dropdown arrow should collapse the dropdown box.

Feature Request: Add new item if unlisted

Excellent widget, thank you.

It would be great if there was an option to let the user add an unlisted item to the select/drop down box if they cannot find the item (eg, a category) they are looking for.

Various other 'auto complete' widgets don't offer this option either, or do so poorly.

The addition of this optional feature would be great.

jquery UI dialog doesn't display correctly

The search box is working for me, however the options display as a list of links with a line break after each, instead of as a select box.

I have a change handler on the select box that still functions when you click any of the links that result.

Calling $.chosen() twice breaks elements

Calling $.chosen() on a select element causes multiple Chosen elements to appear. I suggest adding a line to $.chosen() that checks if the current element has the class "chzn-processed". If it does, silently quit processing. If it doesn't, add the class and continue converting the element to a Chosen select list.

arrow to open select doesn't close select

When you click the arrow to open the select menu, it works as expected. Chosen even turns the arrow upside-down to indicate that its open. However, when you click the inverted arrow, it doesn't close the menu again. You need to click somewhere else on the page to close the menu.

I'm using Mac 10.6.x and Safari 5.0.5

jQuery Version. jQuery('#someElId').chosen() return Elemensts instead created Сhosen objects

It would be a useful method to "chosen" returns the newly created Сhosen classes, rather than the elements.

Or it might be worth to make the Сhosen class on the level of global variables (window.Сhosen), otherwise it is difficult to extend Сhosen class functionality (like in Prototype version).

Blur throws error with jQuery

After including all files and calling $('.chzn-select').chosen(); in a ready handler I'm getting an error on blur:

TypeError: Result of expression 'this.blur_test.bind' [undefined] is not a function.

this.container.find("div.chzn-drop").first is not a function

Hi all

I've the select list a like this:

<div class="customs-container">
  <div id="edit-cus-wrapper" class="form-item">
    <label for="edit-cus">Таможенный пост: </label>
    <select size="10" id="edit-cus" class="form-select" title="Select customs" multiple="multiple" name="cus[]">
      <option value="Амурзетский:10708010">10708010 : Амурзетский</option>
      <option value="Амурзетский:10708012">10708012 : Амурзетский</option>
      ...
      <option value="Южно Сахалинский:10707080">10707080 : Южно Сахалинский</option>
      <option value="Южно Сахалинский:10707090">10707090 : Южно Сахалинский</option>
    </select>
  </div>
</div>

When i try to apply .chosen to $('.form-select') i have an error

Error: this.container.find("div.chzn-drop").first is not a function
Source: http://stat-trunk.dev/sites/all/modules/custom/stat/js/chosen.jquery.js?o
Line: 62

Encoding: utf-8
What happens?

When in jUI modal dialog form, anchor event is not cancelled

This may end up being closely related to issue #18, but I'll keep them separate.

When I use chosen in a jQuery UI modal dialog form, when I click to open the dropdown, the anchor link to # is not cancelled, and thus I am taken back to the top of the page. It doesn't do this when it's not in a jUI dialog.

No dropdown when the select has a dot in it's id

When a selectbox has a dot in it's id, the dropdown isn't filled, nor does the onclick work.
See http://jsfiddle.net/zXS8G/

dropbox not focused fully from the standard select

The title may not be clear. What I wanted to say is, in the demo page http://harvesthq.github.com/chosen/ when you select Into this from the standard select in IE, the list is displayed behind the dropbox from the multiple select. This is not the case in chrome. I mean the focus is not the same in IE and chrome. Hope this makes sense.

[UX] Close multiple select, unpredictable mouse position

In the "close multiple" there's a user-experience issue that happens when closing boxes.

Chrome browser users can probably identify with this right away, as tabs make this behavior easily predictable.

Two possible routes to take:

1. Move the "X" to close onto the left-side, rather than the right. This allows a user to close a series of boxes without "searching around" with the mouse.
2. Make the tab width consistent, this could be much harder to accomplish realistically.
3. Make the boxes align to the right, so when they close the mouse is always over the X, same visual look, except the boxes fall into the right, rather than the left.

When using multiple <select>s on a page an id property is required.

Without <select id="a_unique_id" ... > on a page with multiple select menus chosen renders the first menu, but when it tires to init the second menu they both get messed up.

A possible solution may be to generate a unique id if Chosen can't find the id property on the targeted select menu.

One could also argue that it's a requirement for HTML validation to have the name and id properties be present on a select menu... so this could technically be "working as intended"

onchange event not being triggered; possible missing dependency?

I have a number of fields with onchange attributes, but when a select element had been Chosen-ified the (now hidden) element never had its event triggered. (Prototype version)

In the source I found calls to Event.simulate which seems to be not part of Prototype, but of the Protolicious extensions:
https://github.com/kangax/protolicious/blob/5b56fdafcd7d7662c9d648534225039b2e78e371/event.simulate.js

Simply linking this Javascript file after prototype.js and before chosen.proto.js resolved the issue for me.

Breaks jQuery Events

First off, thanks for this fantastic tool.

My only issue with it is that it breaks jQuery events (e.g. "click", "blur", etc).

Only working on last select, which becomes first select...

Even creating a dummy page with just selects on the page, jquery 1.6.2, adding the chosen script, css, and $('select').chosen(); in document ready produces these results.

Basically it styles all the dropdowns, but only allows clicking of the top one. Also, the top dropdown becomes the last select menu in the html.

Demo page broken in IE9 due to mime type mismatch

The demo page at http://harvesthq.github.com/chosen/ doesn't work for me in IE9. The error message I see in the console is:

SEC7112: Script from https://raw.github.com/harvesthq/chosen/master/chosen/chosen.proto.js was blocked due to mime type mismatch

I assume chosen.proto.js isn't being served as text/javascript?

Cheers,
Olly.

Drop down boxes don't show initial data

I guess this is possibly by design, but in some cases, if I have an initial selection in a standard drop down box, I want that to show up as already selected with Chosen.

jQuery 1.3 support?

There's a discussion about getting this to working with Drupal 6 - while it is possible to use jQuery 1.4 most users are afraid to. Not being too familiar with Chosen, do you know of many issues that prevent making it work with jQ 1.3?

support for optgroups

not sure if this is on your radar or not but would be a helpful option. I can take a stab at implementation unless you have other ideas.

Remove duplicate values during autocomplete matching

If you start typing "United Kingdom" or "United States" in the "Standard Select" demo example at http://harvesthq.github.com/chosen/ you'll see that you get two autocomplete search results, because "United Kingdom" and "United States" appear twice in the original HTML.

However, since they both have identical text and value, I suggest that Chosen should detect the duplication and offer only one instance of each set of duplicated options, further improving the excellent user experience that the plugin provides.

Req: Including non-specified values

This plugin looks and works great as a replacement of the select field. I have a request though: if you add an option to accept values not present in the select, this plugin would be a great autosuggest tool as well (confirmation of new value via enter or user-defined delimiter - comma, space...). I'm really in need of such a thing, the single autosuggest that comes close to your doesn't have autoexpanding input field, so non-present values, when typed, get chopped off and look weird...

Translatable strings

For sites that use other languages than US English, it would be great to have an option to translate the UI strings.

Capture 'Escape' key to cancel form entry

In standard dropdowns, you can hit Escape (on your keyboard) to cancel form entry and close the dropdown. Currently, if you hit escape in any of the 'Chosen' forms, it doesn't have any action. Would be great to add this in as it's the only piece I've noticed that doesn't duplicate native functionality (on OSX/Chrome at least)

Focus cannot be reset using $('#someSelect').chosen().change( ... )

The focus cannot be set into input using the chosen().change( .. ) event handler..

<input id='someInput' type='text'/>
<select id='someSelect'>
  <option value='someVal'>Some Value</option>
  <option value='someVal2'>Some Value 2</option>
</select>

    $("#someSelect").chosen().change(function() {
         $("#someInput").first().focus();
     });

No check for .chzn-select in jQuery plugin

I am integrating Chosen with Drupal and noticed select elements are not converted. CSS and JS files are added, and there are only a few minor CSS errors in FF5/Mac. I did a project-wide search for the class "chzn-select" and found that only the Prototype plugin scans for elements with this class. I assume this is the reason select elements are not converted in my case.

Support Turkish characters

There are Turkish characters problem (searching:ÇİĞÜŞÖ... No results)

Mobile safari display is incorrect

The demo page displays incorrectly in mobile Safari on iOS. Your supported browsers list Safari (and don't explicitly mention mobile Safari), but I would expect some type of fallback (to a regular select element, perhaps?)

[Feature] Keeping classes of the options

I would like being able to add a class on some <option> items of the HTML select list and have them added to the <li> item of the list created by the plugin when using it to enhance the form as I need to be able to style some options in a specific way.

None of the plugin I found to enhance select lists support it currently. Your plugin seems really good and I consider using it so I would love if it supports this feature.

<select>s must have an ID

I've been using Chosen for SELECTs that don't have IDs specified. They're matched with their classnames, so no need for IDs. But the DIVs that replace the SELECTs are not populated when there is no ID on SELECTs. When clicking the arrow, search box is shown, but no items. It took me half an hour to find that the reason is missing IDs.

Please remove this limitation or write about it in Documentation

Delete icon on Multiple Select needs larger click area and more obvious hover state

The delete "button" doesn't extend beyond the size of the icon itself, this makes the clickable area quite small, it should be padded to a square that's approximately the height of the overall container.

Additionally, the mouse cursor obscures the icon when hovering, so it's very hard to spot the subtle colour-change that occurs, so the hover state needs to be more obvious.

Set selected value with javascript

Setting selected value with javascript doesn't work. I know that chosen() adds class single_examplechzn_o_0 to <li> which has nothing in common with option value and that #single_example no more exists after chosen(). Is there a way this can work?

This works:

     <option value="1">1</option> 
     <option value="2">2</option> 
</select>

$("#single_example").val(2);

This doesn't work:

     <option value="1">1</option> 
     <option value="2">2</option> 
</select>

$("#single_example").val(2);

When in jUI modal dialog form, search field doesn't work

I'm using chosen in a jQuery UI modal dialog form.
When I open the dropdown, the search field doesn't focus, and it can't be clicked. Everything else works though.

Related: is there a way to disable the search field if I don't want it? I like it - I only want to disable it because of the current bug. ;-)

Thank you for your effort on this great tool - I went through several jQuery multi-select solutions and this is the best I've found.

title not being read for default text

I have the following:
<select class="required chzn-select" id="entrant_country" name="entrant.country" style="width:350px" title="Choose a country">

but when it renders, there is no "Choose a country". The first option is displayed: http://imgur.com/bOsav

Browser: Google Chrome
OS: Windows 7 Pro 64 bit
Page: ASP.NET MVC3
jQuery: 1.6.1

Multiple Select should allow ctrl-clicking and drag-selection

Currently, with multiple select, each selection closes the dropdown. This forces the user to make a larger number of clicks to select muliple items compared to the enhanced widget.

The widget should allow more rapid selection of multiple values by letting you ctrl-click, and perhaps also click-drag over a number of consecutive choices.

Multiple call to $(".chzn-select").chosen() create multiple html elements

Hi
First of all, thanks for the fantastic and incredibly easy to use plugin.

In a scenario where there are 2 combo, and the content of the second combo is populate after a selection on the first combo via ajax, there's a way to refresh the html content created by the plugin.
something like this

$(".chzn-select").chosen();
$('#select').change(function () {
$.getJSON("/base/PalinsestoService/GetFormatEpisodes/"+sel.val()+".aspx", function (data) {
$(".chzn-select").chosen('refresh');
})

})

thanks

Look for DOMSubtreeModified for updates to options

An excellent piece of javascript! Just one minor thought:

Instead of $("#form_field").trigger("liszt:updated"); one could simply listen to the DOMSubtreeModified event.

Feature Request: Make search optional

I love the search feature for long lists of options, but for short lists, it's a bit redundant. And, I'd like to use this plugin on my entire site, for consistency's sake. So, how about a display option that lets you suppress the search on selects that have a small number of options?

Search Inconsistencies

When searching for "an" (in the list of countries), I see it returns any with the word "and" in it, or starting with "An" or with a second or third word "an", and it even find the 'an" in "Netherlands" - however, it doesn't find "Canada" or "Afghanistan". Not sure why, so thought I'd point it out.

I'm talking about the demo in this case, love the script, plan to use it in the future.

Breaks iOS support

The simple dropdown is extremely hard to use on iOS. You should just disable functionality so the standard iPhone box is shown.