Magento : Multi select box with search

Downlode the plugnin from https://harvesthq.github.io/chosen/
1. Add the following files in your phtml file

<link rel="stylesheet" href="<?php echo $this->getSkinUrl('docsupport/prism.css'); ?>">
<link rel="stylesheet" href="<?php echo $this->getSkinUrl('chosen.css'); ?>">
<style type="text/css" media="all">
/* fix rtl for demo */
.chosen-rtl .chosen-drop { left: -9000px; }
</style>

2. Select box html looks like:

<select data-placeholder="Choose a Country..." class="chosen-select" multiple style="width:350px;" tabindex="4">
    <option value=""></option>
    <option value="United States">United States</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="Afghanistan">Afghanistan</option>
</select>

3. At the bottom add the following script and file

<script src="<?php echo $this->getSkinUrl('chosen.proto.js'); ?>" type="text/javascript"></script>
<script src="<?php echo $this->getSkinUrl('docsupport/prism.js'); ?>" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    document.observe('dom:loaded', function(evt) {
        var config = {
            '.chosen-select'           : {},
            '.chosen-select-deselect'  : {allow_single_deselect:true},
            '.chosen-select-no-single' : {disable_search_threshold:10},
            '.chosen-select-no-results': {no_results_text: "Oops, nothing found!"},
            '.chosen-select-width'     : {width: "95%"}
        }
        var results = [];
        for (var selector in config) {
            var elements = $$(selector);
            for (var i = 0; i < elements.length; i++) {
                results.push(new Chosen(elements[i],config[selector]));
            }
        }
        return results;
    });
</script>

Note: The above plugin is working on prototype so that’s the advantage it will not conflict .

• Magento