Integrating chosen with magento

Chosen is simply awesome. Kudos to the developer(s)

Integrating this into magento was slightly problematic, as it did not play nice with the css prototype validation.

A google search yielded only two possible solutions, and both did not apeal to me, so I decided to roll my own solution.

The solution extends the core Validation.js object, and replaces two methods: isVisible and insertAdvice.

In isVisible, the issue is that magento core functionality will not validate hidden elements, why should it?
I simply detect if the given element is a select, and if so, determine if it has a matching chosen element.
Chosen elements takes the id of the select element, and tags '_chosen' to the end.
I then simply result to TRUE if that is the case, or pass the validation onto the core method (now named _isVisisble)

In insertAdvice, I simply change the container element to the chosen element, which allows the validation advice to appear below (or part of) the chosen element.
If this is not done, it will appear above the chosen element, which is far from ideal.

Last, I listen to the change event fired by chosen, and re-run validation on the element, so any errors would be removed once a choice has been made.

Here is the code. Simply include this into magento via the standard layout.xml way.

you can also view my answer on magento stackexchange: http://magento.stackexchange.com/questions/3445/integrating-chosen-js-prototype-or-jquery/63758#63758

document.observe("dom:loaded", function () {
    Object.extend(Validation, {
        isVisible: function (elm) {
            if ($(elm).tagName == 'SELECT') {
                if ($(elm.id.replace(new RegExp('-', 'g'), '_') + '_chosen') != undefined) {
                    // need to be careful of payment types, as they may not be selected
 // so we do not want to validate the children.
 // determine the parent ul element of this select is display none, and if so,
 // do not validate it.
var parentUL = elm.up('ul');
if(typeof parentUL  != 'undefined' && parentUL.style.display == 'none')
                    {
                        return false;
}
                    return true;
}
            }
            return this._isVisible(elm);
},
_isVisible: function (elm) {
            while (elm.tagName != 'BODY') {
                if (!$(elm).visible()) return false;
elm = elm.parentNode;
}
            return true;
},
insertAdvice: function (elm, advice) {
            if ($(elm.id.replace(new RegExp('-', 'g'), '_') + '_chosen') != undefined) {
                var container = $(elm.id.replace(new RegExp('-', 'g'), '_') + '_chosen');
} else {
                var container = $(elm).up('.field-row');
}
            if (container) {
                Element.insert(container, {after: advice});
} else if (elm.up('td.value')) {
                elm.up('td.value').insert({bottom: advice});
} else if (elm.advaiceContainer && $(elm.advaiceContainer)) {
                $(elm.advaiceContainer).update(advice);
}
            else {
                switch (elm.type.toLowerCase()) {
                    case 'checkbox':
                    case 'radio':
                        var p = elm.parentNode;
if (p) {
                            Element.insert(p, {'bottom': advice});
} else {
                            Element.insert(elm, {'after': advice});
}
                        break;
default:
                        Element.insert(elm, {'after': advice});
}
            }
        }
    });

if(typeof Checkout  != 'undefined')
    {
        Checkout.prototype.reloadProgressBlock = Checkout.prototype.reloadProgressBlock.wrap(function (parent) {
            jQuery("select").chosen(
                {
                    disable_search_threshold: 13,
no_results_text: "Sorry, nothing found!",
width: "100%",
inherit_select_classes: true

});
parent();

});
}

    jQuery("select").chosen(
        {
            disable_search_threshold: 13,
no_results_text: "Sorry, nothing found!",
width: "100%",
inherit_select_classes: true

});

jQuery("select").chosen().change(function (e) {
        Validation.validate(e.target);
});
});