It's a start on making a select box thing much like jquery.multselect

gistfile1.js

(function($) {

  $.widget("ui.singleselect", {
    options: {
      // sortable: true,
      // searchable: true,
  		animated: 'fast',
  		show: 'slideDown',
  		hide: 'slideUp'
  	},
  	_create: function() {
  		this.element.hide();
  		this.id = this.element.attr("id");
  		this.container = $('<div class="ui-singleselect ui-helper-clearfix ui-widget"></div>').insertAfter(this.element);
  		this.listContainer = $('<div class="list-container"></div>').appendTo(this.container);
  		this.listActions = $('<div class="actions ui-widget-header ui-helper-clearfix"><a href="#" class="remove-all">'+$.ui.singleselect.locale.removeAll+'</a></div>').appendTo(this.listContainer);
  		this.listItems = $('<ul class="list-items connected-list"><li class="ui-helper-hidden-accessible"></li></ul>').bind('selectstart', function(){return false;}).appendTo(this.listContainer);
		
  		var that = this;

  		// fix list height to match <option> depending on their individual header's heights
  		this.listItems.height(Math.max(this.element.height()-this.listActions.height(),100));
		
		  if ( !this.options.animated ) {
  			this.options.show = 'show';
  			this.options.hide = 'hide';
  		}
  		// init lists
  		this._populateLists(this.element.find('option'));
		
  	},
    destroy: function() {
     this.element.show();
     this.container.remove();
    
     $.widget.prototype.destroy.apply(this, arguments);
    },
  	_populateLists: function(options) {
  		this.listItems.children('.ui-element').remove();
  		this.count = 0;

  		var that = this;
  		var items = $(options.map(function(i) {
  		  var item = that._getOptionNode(this).appendTo(that.listItems).show();
			that._applyItemState(item);
  			item.data('idx', i);
  			return item[0];
      }));
    },
  	_getOptionNode: function(option) {
  		option = $(option);
  		var node = $('<li class="ui-state-default ui-element" title="'+option.text()+'"><span class="ui-icon"/>'+option.text()+'<a href="#" class="action"><span class="ui-corner-all ui-icon"/></a></li>').hide();
  		node.data('optionLink', option);
  		return node;
  	},
  	// clones an item with associated data
  	// didn't find a smarter away around this
  	_cloneWithData: function(clonee) {
  		var clone = clonee.clone();
  		clone.data('optionLink', clonee.data('optionLink'));
  		clone.data('idx', clonee.data('idx'));
  		return clone;
  	},
  	_applyItemState: function(item) {
		item.children('span').removeClass('ui-icon-arrowthick-2-n-s').addClass('ui-helper-hidden').removeClass('ui-icon');
		item.find('a.action span').addClass('ui-icon-minus').removeClass('ui-icon-plus');
		this._registerRemoveEvents(item.find('a.action'));
  		
  		this._registerHoverEvents(item);
  	},
  	// taken from John Resig's liveUpdate script
  	_filter: function(list) {
  		var input = $(this);
  		var rows = list.children('li'),
  			cache = rows.map(function(){
				
  				return $(this).text().toLowerCase();
  			});
		
  		var term = $.trim(input.val().toLowerCase()), scores = [];
		
  		if (!term) {
  			rows.show();
  		} else {
  			rows.hide();

  			cache.each(function(i) {
  				if (this.indexOf(term)>-1) { scores.push(i); }
  			});

  			$.each(scores, function() {
  				$(rows[this]).show();
  			});
  		}
  	},
  	_registerHoverEvents: function(elements) {
  		elements.removeClass('ui-state-hover');
  		elements.mouseover(function() {
  			$(this).addClass('ui-state-hover');
  		});
  		elements.mouseout(function() {
  			$(this).removeClass('ui-state-hover');
  		});
  	},
  	_registerRemoveEvents: function(elements) {
  		var that = this;
  		elements.click(function() {
  			return false;
  		});
   	},
  });
		
  $.extend($.ui.singleselect, {
  	locale: {
  		removeAll:'Remove all',
  		itemsCount:'items selected'
  	}
  });


})(jQuery);