julesjanssen / chosen Goto Github PK

On your public example page, if you search for "british indian ocean" you'll get the one result. If you search for "indian", you also get that result. However, if you search for "indian ocean", you don't.

Can this be fixed?

I deployed my app to Heroku and everything except for the Chosen plugin works. Can you please let me know a workaround to fix this issue so that my app can be useable via its public Heroku url? Please let me know if you need the link.

Thank you.

Hi ,

I have applied the chzn-select to my drop down it works great till the time i fire selected event change which is inside the updatepanel .

I tried to apply same class again using jquery as follows

$(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(loadControlDuringAjax);
loadControlDuringAjax();
});
function loadControlDuringAjax() {
$("#ContentPlaceHolder1_inputMetroLineMasterId").addClass("chzn-select formInput");
}

This is not working ,

Any idea how to apply the CSS again after ajax loads the control.

Thanks in advance.

Shankar

The plugin hides certain elements with negative lefts (like left: -9000px). When RTL is enabled, these all need to be switched to right (instead of left).

The 'disco link' on the Github page leads to a youtube video that is no longer available.

In Chrome(Webkit) the UL in the dropdown is floating off to the left. Hidden ..

Here is a fix;

.chzn-container .chzn-results {
    /* webkit fix */
    display: block;
    clear: left;
    /* end fix */
    margin: 0 4px 4px 0;
    max-height: 190px;
    padding: 0 0 0 4px;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
}

I use the first option in a select as a placeholder (with an empty value) e.g.

<select>
    <option value=''>Please select...</option>
    <option value='1'>First option</option>
</select>

When I enable Chosen, then Chosen's default placeholder text is shown instead.

It would be nice to have some backwards compatibility and I would like to propose the following...

If the first option for the select has a null value, then use the label for that option as the placeholder text instead of the default Chosen placeholder text.

What do you think?

Thanks.

Great Plugin

The Chosen script ignores the disabled attribute of a select list. So a select list which is disabled wil be useable if the chosen script is used.

Hello, I'm using the latest version of chosen for Mootools.

I have elements in my select for exemple "Test word" and when I type "Test w" that show me no results message.

I had seen the same issue on chosen by harvesthq but it was solved 4 months ago in a new version. I don't know how to fix it. Can you please see where is the problem ?

Thank you

If I have items that start with a search term and other items that contain the very same search term, e.g.:

Madison Square Garden
Square Phillips
Transdimensional Square

if I search for "Square" I get the second term, but not the first or the third.

Hi All,
I am using chosen prototype for select box. Now i want to fire onchange event on that select box.
How to do this. please help me.

Event.observe($(".chzn-select"),'change', function(){
//alert($(".chzn-select").chosen());
})

Hi
first - thanks for your work!

do you have an example with multiple-select and the fireEvent?
I don't get it to work, and by sending the form there is no post of the chosen selects..

thank you, c

Any chance we can get the mootools port updated to the latest version of chosen, which has now had it's official 1.0 release and a whole ton of speed improvements (amongst other things)

https://github.com/harvesthq/chosen

The website http://julesjanssen.github.io/chosen/ lists outdated event name 'liszt:updated', whereas the correct version is now 'chosen:updated.chosen'.
Thanks for a great plugin, otherwise!

It works just fine few days ago, but now when i search word from middle sentence, i can only search one word instead of few word with space separator.

for example:

Atlanta Falcons
New Orleans Saints
Tampa Bay Buccaneers

If i search from beginning, everything works fine, but if i search "Bay Bucc" , it will show me 'no result match "Bay Bucc".

Any idea? thanks.

We use 1.1.0 chosen.jquery.min.js, in every browser

Hi everybody,
I have some issues with choosen and laravel; I use chosen like this :
*
{{ Form::select('secteur', $select_secteur, null, ['class' => 'chosen-select', 'style' => 'width:350px', 'tabindex' => '4', 'multiple']) }}
*
I have 2 questions :
How use default values from my database ?
And i need to return a array or text like this 'value1, value2, value3', how to do this?
Sorry for my bad english and i hope someone can help me, thank you.

Hi, I made a extended plugin voor chosen to search with an ajax request!
It works great.
The code can be cleaned up a little bit.

Elements.implement({
ajaxchosen: function(data, options){
return this.each(function(el){
if (!el.hasClass("chzn-done")) {
return new Chosen.Ajax(el, data, options);
}
});
}
});

Chosen.Ajax = new Class({

Extends: Chosen,
Implements: [Options,Events],

options: {
    url:''
},

initialize: function(elmn, data, options){
    this.parent(elmn);

    this.req = new Request.JSON({url:data.url,headers: {'X-Request': 'JSON'}});
    var that = this;
    this.req.addEvents({
        'success': function(dataa){that.reqSuccess(dataa)}
    });
},

reqSuccess: function(data){
    var items;
    var that = this;
    if (!(data != null)) {
        return;
    }

    Array.each(this.form_field.getElements('option'),function(el) {
        if (!el.get("selected")) {
            el.destroy();
        }
    });

    Object.each(data, function(el) {
        that.form_field.grab(new Element('option',{'value':el.value,'html':el.text}));
    });

    this.form_field.fireEvent("liszt:updated");
    this.search_field.set('value', this.search_field.get('prevVal'));
},
keyup_checker: function(evt){
    var field, val;
    val = evt.target.get('value');
    if (val.length < 3 || val === evt.target.get('prevVal')) {
      return false;
    }
    evt.target.set('prevVal', val);
    field = evt.target;

    this.req.send('term='+val);
}

});

Sorry for the bad english
on a non minified archive set this new prop

AbstractChosen.prototype.escape_regexp = function (querryEntered) {
var querryEscaped = querryEntered.replace(/([.?+^$[](){}|-])/g, "$1");
querryEscaped = querryEntered.replace(/[-[]{}()+?.,^$|#\s]/g, "$&")
//arruma os caracteres especiais para serem exibidos em view
querryEscaped = querryEscaped.replace(/a/g, "(a|\u00e1|\u00e0|\u00e2|\u00e3|\u00e4)");
querryEscaped = querryEscaped.replace(/A/g, "(A|\u00c1|\u00c0|\u00c2|\u00c3|\u00c4)");
querryEscaped = querryEscaped.replace(/e/g, "(e|\u00e9|\u00e8|\u00ea|\u00ea)");
querryEscaped = querryEscaped.replace(/E/g, "(e|\u00c9|\u00c8|\u00ca|\u00cb)");
querryEscaped = querryEscaped.replace(/i/g, "(i|\u00ed|\u00ec|\u00ee|\u00ef)");
querryEscaped = querryEscaped.replace(/I/g, "(I|\u00cd|\u00cc|\u00ce|\u00cf)");
querryEscaped = querryEscaped.replace(/o/g, "(o|\u00f3|\u00f2|\u00f4|\u00f5|\u00f6)");
querryEscaped = querryEscaped.replace(/O/g, "(O|\u00d3|\u00d2|\u00d4|\u00d5|\u00d6)");
querryEscaped = querryEscaped.replace(/u/g, "(u|\u00fa|\u00f9|\u00fb|\u00fc)");
querryEscaped = querryEscaped.replace(/U/g, "(U|\u00da|\u00d9|\u00db)");
querryEscaped = querryEscaped.replace(/c/g, "(c|\u00e7)");
querryEscaped = querryEscaped.replace(/C/g, "(C|\u00c7)");
querryEscaped = querryEscaped.replace(/n/g, "(n|\u00f1)");
querryEscaped = querryEscaped.replace(/N/g, "(N|\u00d1)");
querryEscaped = querryEscaped.replace(/&/g, "(\u0026)");
querryEscaped = querryEscaped.replace(/'/g, "(\u0027)");
//return queryToEscape.replace(/([.?*+^$[](){}|-])/ig, "$1");
return querryEscaped;
};

and on a function AbstractChosen.prototype.winnow_results change
this - escapedSearchText = searchText.replace(/[-[]{}()*+?.,^$|#\s]/g, "$&");
to this - escapedSearchText = this.escape_regexp(searchText);

this will make all the special character for the a,A,e,E,i,I,o,O,u,U,c,C,n,N,&

Jaws doesn't read Select properly it read it "type and text"

Consider this select:

<select>
   <option value="">                              </option>
   <option value="1">                        One               </option>
   <option value="2">                        Two               </option>
   <option value="3">                        Three               </option>
</select>

And try to search the letter "T" in the search box, you'll get no results, cause of the spaces in the option elements.
Sometimes is not possible to have correct html 'cause it's the result of a server-side processing.

So the point is; the chosen library should evaulate the options' text values after trimming them.

I have uploaded the css, min.js and the sprite to my server.

I've added the javascript call, css call in my code as well as edited the select form I want to change to class="chosen" but nothing happens.

I'm a designer with little JS knowledge so could you maybe hold my hand to explain how to install/activate this plugin?

I am trying to make it work with Joomla 1.5.x and i realize that platform uses 1.2 Mootools but I only want to use this on a few pages...so if anyone could help with that i would much appreciate it.

If you select it in the second time the item appear in the list (but can't be selected) -
this is happens because when you deselct an item there is set style block and when you select it again the display block override the display none in result-selected css rule set to that li:

the fix is in line 591 instead

result.removeClass("result-selected").addClass("active-result").setStyle('display', 'block');

remove the set style display block

result.removeClass("result-selected").addClass("active-result");

Because I don't understand why there is need to set it display block if you remove the result-selected css rule.

Alternatively you can set the css rule:

.chzn-container-multi .chzn-drop .result-selected {
  display: none;
}

to

.chzn-container-multi .chzn-drop .result-selected {
  display: none !important;
}

Hello :)

would be useful to have the possibility to "disable" a chosen select, the same way we set attribute disabled="disabled" in standard select elements.

When using XHTML, Chosen-ified select boxes have no option items. This is due to the fact that names in XHTML are always lower case, but SelectParser’s add_node and add_option methods compare the node names to upper case strings.

Jquery chosen version : 1.1.0
Browser : IE 8
Problem : chosen does not render properly when its under another unordered list with its own css. (Please see image). Im using chosen inside a tab.

here's the css that is causing that error :

ul#tab li
{
display: none;
padding: 30px;
border: solid 4px #ffba35;
}

but if i remove the display: none then my tabs will collapse but chosen will work again.

Hi

I got a case with 2 chosens selects : A and B.
When clicking on B, the choices are displayed and I send an alert, requesting the user to fill in A first.

Usually clicking outside of B, the displayed options will collapse, but if I click on A, both chosen options are displayed.

Does someone else have this problem ?

Is there a "close" method I could use to force B to close?

Raphael

I was looking for a complete list of options and how to use them, as the ones from the original project are not working here.

I would like to hide the search form from a single select, and if possible search in all the string rather than in the beginning.

Thanks

Here is a proposal for the file Locale.fr-FR.Chosen.js

Locale.define('fr-FR', 'Chosen', {   placeholder: function(multiple) { return (multiple ? 'Sélectionner des options' : 'Sélectionner une option'); }, noResults: 'Aucun résultat' });

Hi,

i use Chosen on Joomla 3.x with jQuery default library.
When i perform a selection, how can i select the related html OPTION value ?
In fact in ".chzn-single" tag, i can find only the text (but neither the value nor the element index)

I'm desperate!

Hi,

would be very nice to have a function to remove the chosen and go back to a "simple" select.

Is there any way we can add a 'Add' button if the user types something, that isnt on the list. it will then create the option elements and post it with the form ?

Hi,

I want to be able to hover over an option to get a more detailed description. I know this can be done with a title tag in a normal html option. Is there any plans to include support for this in Chosen?

Thanks