Anton Shestakov <engored@ya.ru>, Sun, 05 May 2013 20:10:51 +0900
Working prototype.
jquery.lensy.js
Permissions: -rw-r--r--
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); $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)); // escape action: close / clean filter containerClass: 'lensy-container', closeButtonText: 'Close', closeButtonClass: 'lensy-button', modalClass: 'lensy-modal', filterClass: 'lensy-filter', widgetClass: 'lensy-widget', itemActiveClass: 'active', itemFn: function(value) { return $('<span>').text(value); }, filterFn: function(filterString, value) { return value.toLowerCase().indexOf(filterString.toLowerCase()) != -1; }