Pastable version of filter selectbox with 3000+ options

<pre class='prettyprint' language='javascript'>;(function($) {
        $.fn.extend(
            {
                multiselect: function(options) {
                    var options = $.extend({
                            changeCallback: null,
                            single: false,
                        },
                        options || {}
                    );

return this.each(function(){
                            $(this).multiselect_render(options);
                        }
                    )
                },
                multiselect_render: function(options) {
                    var $selected_elements = $('&lt;span&gt;&lt;/span&gt;');

var $options = $('&lt;div&gt;&lt;/div&gt;');

var $search = $('&lt;input type=&quot;text&quot;/&gt;')
                    .addClass('multiselectSearch')
                    .keyup(function(e) {
                            var _val = $(this).val();

if(!_val) {
                                $options
                                .children(&quot;div&quot;)
                                .show();
                            } else {
                                $options
                                .children(&quot;div&quot;)
                                .hide()
                                .filter(&quot;:icontains(&quot;+_val+&quot;)&quot;)
                                .show();
                            }
                        }
                    );

var $widget = $(&quot;&lt;div/&gt;&quot;) ;

var $choose;
                    if(options.single) {
                        $choose = $search
                    } else {
                        $choose = $(&quot;&lt;a/&gt;&quot;)
                        .addClass('multiselectChoose')
                        .text(&quot;[Choose...]&quot;);
                    }
                    $choose.click(function(e) {
                            e.preventDefault();
                            $widget.toggle(
                                0,
                                function() {
                                    $(document).click(body_click_hide_widget);
                                }
                            );
                            $search.select();
                        }
                    );

var body_click_hide_widget = function(e) {
                        var $$this = $(e.target);

if($$this[0] == $choose[0])
                            return;

var $$parents = $$this.parents().andSelf();

hide = true;
                        for (var i=0; i&lt;$$parents.length; i++) {
                            if($$parents[i] == $widget[0]) {
                                hide=false;
                                break;
                            }
                        }
                        if(hide) {
                            $widget.hide();
                            $(document).unbind(&quot;click&quot;, body_click_hide_widget);
                        }
                    }

var update_selected_elements = function() {
                        var arr = new Array();
                        $options.find(&quot;:checked&quot;).next('label').each(function() {
                                arr.push($(this).text());
                            }
                        );
                        $selected_elements.text(arr.join(', '));
                    };

$widget.append($search);

// button close
                    if(!options.single) {
                        $widget
                        .append(
                            $(&quot;&lt;a/&gt;&quot;)
                            .text(&quot;close&quot;)
                            .addClass('multiselectClose')
                            .click(function(e) {
                                    e.preventDefault();
                                    $widget.hide();
                                    $(document).unbind(&quot;click&quot;, body_click_hide_widget);
                                }
                            )
                        )
                    }

var $this = $(this).hide();
                    var $opts = $this.children(&quot;option&quot;);
                    var $parent_id = $this.attr('id');
                    var $parent_name = $this.attr('name');
                    var nb_opts = $opts.length;
                    var type = options.single ? 'radio' : 'checkbox';
                    var opts_arr = new Array();
                    $opts.each(
                        function(idx) {
                            var $$this = $(this);
                            var $$this_value = $$this.val()

var input = '&lt;input type=&quot;' + type + '&quot; id=&quot;' + $parent_id + '-' + $$this_value + '&quot; name=&quot;' + $parent_name + '&quot; value=&quot;' + $$this_value + '&quot;' + ($$this.is(':selected') ? ' checked=checked' : '') + ' /&gt;';

var label = '&lt;label for=&quot;' + $parent_id + '-' + $$this_value + '&quot;&gt;' + $$this.text() + '&lt;/label&gt;';

var option = '&lt;div&gt;'+input+label+'&lt;/div&gt;';

opts_arr.push(option);
                        }
                    );

$options.append(opts_arr.join(''));

$options
                    .children('div').addClass('multiselectOption')
                    .change(
                        function(e) {
                            if(options.changeCallback) {
                                options.changeCallback.call(this);
                            }
                            update_selected_elements();
                            if(options.single) {
                                $search.val($selected_elements.text());
                                $widget.hide();
                                $(document).unbind(&quot;click&quot;, body_click_hide_widget);
                            }
                        }
                    );

update_selected_elements();

$widget.append($options);

if(options.single) {
                        $choose.val($selected_elements.text())
                        $this.before($choose);
                    } else {
                        $this.before($selected_elements).before($choose);
                    }

$this.replaceWith($widget.hide().addClass('multiselectWidget'));
                    return $widget
                }
            }
        );
    }
)(jQuery);</pre>
<a href="http://www.refactormycode.com/codes/1168-filter-selectbox-with-3000-options" style="color:#fff" title="As seen on RefactorMyCode.com"><img alt="Small_logo" src="http://www.refactormycode.com/images/small_logo.gif" style="border:0" /></a>

Refactor :my => 'code'

Recent

Popular

Pastable version of filter selectbox with 3000+ options