jQuery plugin to draw a multi select picklist

ulPickList.css

ul.container-list {
    border-color: #EEE;
    border-style: solid;
    border-width: 1px;
    overflow-x: auto;
    overflow-y: scroll;
    display: block;
    list-style : none;
    color : #444;
    padding : 0px;
    background-color : white;
}

ul.container-list li {
    padding : 6px;
    margin : 0px;
    cursor : pointer;
    border-bottom : 1px #EEE solid;
}

ulPickList.js

(function($) {
    $.fn.twinBoxMultiSelectList = function(options) {

        var settings = $.extend(true, {
            // all styling related options
            styles: {
                containerClass: 'container-list',
                selectedItemClass: 'selected-item',
                width: '150px',
                height: '170px'
            },
            // this will append the generated list in the target element
            append2TargetElem: true
        }, options);

        /*
          Returns true if the select option is selected
         */
        function isOptionSelected(opt) {
            var selectedAttr = opt.attr('selected');
            return selectedAttr && selectedAttr == 'selected';
        }

       /*
          Marks the list item as selected
      */
       function markItemSelected(liItem) {
            liItem.addClass(settings.styles.selectedItemClass);
        }

        // Create a blank picklist  
        var pickList = $('<ul/>')
                           .css('max-height', settings.styles.height)
                           .css('width', settings.styles.width)
                           .css('min-height', settings.styles.height)
                           .attr('class', settings.styles.containerClass)
                           .attr('usageType', 'available');

        var selPickList = pickList.clone();        
        selPickList.attr('usageType', 'selected');

        this.find('option').each(
            function() {
                var $this = $(this);
                var newLi = $('<li/>').html($this.html());                
                // associate this option with the list item
                newLi.data('option', $this);
                if (isOptionSelected($this)) {
                    newLi.appendTo(selPickList);
                } else {
                    newLi.appendTo(pickList);
                }
            });

        if (settings.append2TargetElem) {
            pickList.appendTo($(options.availableList));
            selPickList.appendTo($(options.selectedList)); 
        } else {
            $(options.availableList).html(pickList);
            $(options.selectedList).html(selPickList);            
        }

        
        function listItemClickHandler() {
            return $(this).slideUp('fast', function() {
                    var li = $(this);
                    var liParent = li.parent();
                    var selOption = li.data('option');
                    li = li
                            .remove()
                            .data('option', selOption)
                            .click(listItemClickHandler);
                    var appendToList = null;
                    if (liParent.attr('usageType') == 'selected') {
                        // un select
                        appendToList = pickList;
                        selOption.removeAttr('selected');
                        selOption.attr('selected', false);
                    } else {
                        appendToList = selPickList;
                        selOption.attr('selected', 'selected');
                    }                      
                    li.appendTo(appendToList);                                                      li.slideDown();
                    return this;    
                }
            );//fadeOut
            

        }
        if (settings.searchBox) {
            $(settings.searchBox).keyup(function(){
                var searchBoxVal = $(this).val().toLowerCase();
                 pickList.find('li').each(
                    function() {
                         var li = $(this);
                         if (li.html().toLowerCase().indexOf(searchBoxVal) < 0) 
                            li.hide();
                         else {
                            li.show();
                         } 
                    }
                );
            });
        }
        
        // associate click handler with the list item
        pickList.find('li').click(listItemClickHandler);
        selPickList.find('li').click(listItemClickHandler);
        this.hide();
        // maintain chainablity
        return this;
    };
})(jQuery);