--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/jquery.lensy.js Sun May 05 20:10:51 2013 +0900
+ var settings, $select, $widget, $modal, $filter, $container, $closeButton;
+ function Lensy(element, options) {
+ settings = $.extend({}, $.fn.lensy.defaults, options);
+ $widget = $('<ul>').addClass(settings.widgetClass);
+ $modal = $('<div>').addClass(settings.modalClass).hide();
+ $filter = $('<input>').attr('type', 'text').addClass(settings.filterClass);
+ $container = $('<ul>').addClass(settings.containerClass);
+ $closeButton = $('<a>').text(settings.closeButtonText).addClass(settings.closeButtonClass);
+ bindEvents: function() {
+ $widget.click($.proxy(this.show, this));
+ $closeButton.click($.proxy(this.hide, this));
+ // $item in $container gets clicked on
+ var itemSelected = function() {
+ var value = $item.attr('data-original-value');
+ var values = $select.val() || [];
+ if (values.indexOf(value) == -1) {
+ $select.val(values.concat(value));
+ $select.val($.grep(values, function(v) { return v != value; }));
+ $select.trigger('change');
+ // $container is populated with $items
+ $select.find('option').each(function() {
+ var $item = $('<li>').addClass(settings.itemClass);
+ $item.attr('data-original-value', $option.val());
+ $item.html(settings.itemFn($option.val()));
+ $container.append($item);
+ $item.on('click', itemSelected);
+ var update = function() {
+ var values = $select.val() || [];
+ $container.find('[data-original-value]').each(function() {
+ var value = $item.attr('data-original-value');
+ if (values.indexOf(value) == -1) {
+ $item.removeClass(settings.itemActiveClass);
+ $item.addClass(settings.itemActiveClass);
+ var $widgetItem = $('<li>').addClass(settings.itemClass);
+ $widgetItem.html((settings.widgetItemFn || settings.itemFn)(value));
+ $widget.append($widgetItem);
+ $select.on('change', update);
+ var filter = function() {
+ $container.find('[data-original-value]').each(function() {
+ var value = $item.attr('data-original-value');
+ if (settings.filterFn($filter.val(), value, $item)) {
+ $filter.on('change keyup', filter);
+ $.fn.lensy = function(options) {
+ return this.each(function() {
+ if (!$.data(this, 'lensy')) {
+ $.data(this, 'lensy', new Lensy(this, options));
+ $.fn.lensy.defaults = {
+ // escape action: close / clean filter
+ containerClass: 'lensy-container',
+ closeButtonText: 'Close',
+ closeButtonClass: 'lensy-button',
+ modalClass: 'lensy-modal',
+ filterClass: 'lensy-filter',
+ widgetClass: 'lensy-widget',
+ itemClass: 'lensy-item',
+ itemActiveClass: 'active',
+ itemFn: function(value) { return $('<span>').text(value); },
+ widgetItemFn: undefined,
+ filterFn: function(filterString, value) { return value.toLowerCase().indexOf(filterString.toLowerCase()) != -1; }