assets/javascripts/semantic_ui/definitions/modules/dropdown.js in less-rails-semantic_ui-2.0.7.0 vs assets/javascripts/semantic_ui/definitions/modules/dropdown.js in less-rails-semantic_ui-2.1.4.0

- old
+ new

@@ -37,10 +37,11 @@ ? $.extend(true, {}, $.fn.dropdown.settings, parameters) : $.extend({}, $.fn.dropdown.settings), className = settings.className, message = settings.message, + fields = settings.fields, metadata = settings.metadata, namespace = settings.namespace, regExp = settings.regExp, selector = settings.selector, error = settings.error, @@ -63,10 +64,11 @@ $menu = $module.children(selector.menu), $item = $menu.find(selector.item), activated = false, itemActivated = false, + internalChange = false, element = this, instance = $module.data(moduleNamespace), initialLoad, pageLostFocus, @@ -91,15 +93,11 @@ module.save.defaults(); module.restore.selected(); module.create.id(); - if(hasTouch) { - module.bind.touchEvents(); - } - module.bind.mouseEvents(); - module.bind.keyboardEvents(); + module.bind.events(); module.observeChanges(); module.instantiate(); } @@ -181,14 +179,15 @@ ? values : [values] ; $.each(values, function(index, value) { if(module.get.item(value) === false) { - html = settings.templates.addition(value); + html = settings.templates.addition( module.add.variables(message.addResult, value) ); $userChoice = $('<div />') .html(html) - .data(metadata.value, value) + .attr('data-' + metadata.value, value) + .attr('data-' + metadata.text, value) .addClass(className.addition) .addClass(className.item) ; $userChoices = ($userChoices === undefined) ? $userChoice @@ -209,10 +208,16 @@ module.verbose('Adding custom user value'); module.add.label(value, value); }); } }, + menu: function() { + $menu = $('<div />') + .addClass(className.menu) + .appendTo($module) + ; + } }, search: function(query) { query = (query !== undefined) ? query @@ -266,26 +271,23 @@ layout: function() { if( $module.is('select') ) { module.setup.select(); module.setup.returnedObject(); } + if( !module.has.menu() ) { + module.create.menu(); + } if( module.is.search() && !module.has.search() ) { module.verbose('Adding search input'); $search = $('<input />') .addClass(className.search) .insertBefore($text) ; } if(settings.allowTab) { module.set.tabbable(); } - if($menu.length === 0) { - $menu = $('<div />') - .addClass(className.menu) - .appendTo($module) - ; - } }, select: function() { var selectValues = module.get.selectValues() ; @@ -295,11 +297,14 @@ } // see if select is placed correctly already if($input.parent(selector.dropdown).length > 0) { module.debug('UI dropdown already exists. Creating dropdown menu only'); $module = $input.closest(selector.dropdown); - $menu = $module.children(selector.menu); + if( !module.has.menu() ) { + module.create.menu(); + } + $menu = $module.children(selector.menu); module.setup.menu(selectValues); } else { module.debug('Creating entire dropdown from select'); $module = $('<div />') @@ -314,20 +319,24 @@ $input.prop('multiple', true); } if($input.is('[multiple]')) { module.set.multiple(); } + if ($input.prop('disabled')) { + module.debug('Disabling dropdown') + $module.addClass(className.disabled) + } $input .removeAttr('class') .detach() .prependTo($module) ; } module.refresh(); }, menu: function(values) { - $menu.html( templates.menu( values )); + $menu.html( templates.menu(values, fields)); $item = $menu.find(selector.item); }, reference: function() { module.debug('Dropdown behavior was called on select, replacing with closest dropdown'); // replace module reference @@ -380,11 +389,10 @@ .removeData(metadata.defaultValue) .removeData(metadata.placeholderText) ; }, - toggle: function() { module.verbose('Toggling menu visibility'); if( !module.is.active() ) { module.show(); } @@ -398,38 +406,41 @@ ? callback : function(){} ; if( module.can.show() && !module.is.active() ) { module.debug('Showing dropdown'); - if(module.is.multiple()) { - if(!module.has.search() && module.is.allFiltered()) { - return true; - } + if(module.is.multiple() && !module.has.search() && module.is.allFiltered()) { + return true; } - module.animate.show(function() { - if( module.can.click() ) { - module.bind.intent(); - } - module.set.visible(); - callback.call(element); - }); - settings.onShow.call(element); + if(module.has.message() && !module.has.maxSelections()) { + module.remove.message(); + } + if(settings.onShow.call(element) !== false) { + module.animate.show(function() { + if( module.can.click() ) { + module.bind.intent(); + } + module.set.visible(); + callback.call(element); + }); + } } }, hide: function(callback) { callback = $.isFunction(callback) ? callback : function(){} ; if( module.is.active() ) { module.debug('Hiding dropdown'); - module.animate.hide(function() { - module.remove.visible(); - callback.call(element); - }); - settings.onHide.call(element); + if(settings.onHide.call(element) !== false) { + module.animate.hide(function() { + module.remove.visible(); + callback.call(element); + }); + } } }, hideOthers: function() { module.verbose('Finding other dropdowns to hide'); @@ -454,12 +465,34 @@ module.verbose('Hiding sub menus', $subMenus); $subMenus.transition('hide'); }, bind: { + events: function() { + if(hasTouch) { + module.bind.touchEvents(); + } + module.bind.keyboardEvents(); + module.bind.inputEvents(); + module.bind.mouseEvents(); + }, + touchEvents: function() { + module.debug('Touch device detected binding additional touch events'); + if( module.is.searchSelection() ) { + // do nothing special yet + } + else if( module.is.single() ) { + $module + .on('touchstart' + eventNamespace, module.event.test.toggle) + ; + } + $menu + .on('touchstart' + eventNamespace, selector.item, module.event.item.mouseenter) + ; + }, keyboardEvents: function() { - module.debug('Binding keyboard events'); + module.verbose('Binding keyboard events'); $module .on('keydown' + eventNamespace, module.event.keydown) ; if( module.has.search() ) { $module @@ -470,29 +503,21 @@ $document .on('keydown' + elementNamespace, module.event.document.keydown) ; } }, - touchEvents: function() { - module.debug('Touch device detected binding additional touch events'); - if( module.is.searchSelection() ) { - // do nothing special yet - } - else if( module.is.single() ) { - $module - .on('touchstart' + eventNamespace, module.event.test.toggle) - ; - } - $menu - .on('touchstart' + eventNamespace, selector.item, module.event.item.mouseenter) + inputEvents: function() { + module.verbose('Binding input change events'); + $module + .on('change' + eventNamespace, selector.input, module.event.change) ; }, mouseEvents: function() { - module.debug('Mouse detected binding mouse events'); + module.verbose('Binding mouse events'); if(module.is.multiple()) { $module - .on('click' + eventNamespace, selector.label, module.event.label.click) + .on('click' + eventNamespace, selector.label, module.event.label.click) .on('click' + eventNamespace, selector.remove, module.event.remove.click) ; } if( module.is.searchSelection() ) { $module @@ -625,11 +650,10 @@ queryRemote: function(query, callback) { var apiSettings = { errorDuration : false, throttle : settings.throttle, - cache : 'local', urlData : { query: query }, onError: function() { module.add.message(message.serverError); @@ -666,11 +690,11 @@ $results = $(), escapedTerm = module.escape.regExp(searchTerm), beginsWithRegExp = new RegExp('^' + escapedTerm, 'igm') ; // avoid loop if we're matching nothing - if(searchTerm === '') { + if( !module.has.query() ) { $results = $item; } else { module.verbose('Searching for matching values', searchTerm); $item @@ -704,11 +728,10 @@ } } }) ; } - module.debug('Showing only matched items', searchTerm); module.remove.filteredItem(); $item .not($results) .addClass(className.filtered) @@ -763,20 +786,26 @@ $selectedItem = ($currentlySelected.length > 0) ? $currentlySelected : $activeItem, hasSelected = ($selectedItem.size() > 0) ; - if(hasSelected) { + if( hasSelected && module.has.query() ) { module.debug('Forcing partial selection to selected item', $selectedItem); module.event.item.click.call($selectedItem); } else { module.hide(); } }, event: { + change: function() { + if(!internalChange) { + module.debug('Input changed, updating selection'); + module.set.selected(); + } + }, focus: function() { if(settings.showOnFocus && !activated && module.is.hidden() && !pageLostFocus) { module.show(); } }, @@ -794,11 +823,11 @@ if(!activated && !pageLostFocus) { module.remove.activeLabel(); module.hide(); } }, - // prevents focus callback from occuring on mousedown + // prevents focus callback from occurring on mousedown mousedown: function() { activated = true; }, mouseup: function() { activated = false; @@ -825,10 +854,15 @@ } else { module.hide(); } } + else if(pageLostFocus) { + if(settings.forceSelection) { + module.forceSelection(); + } + } } }, icon: { click: function(event) { module.toggle(); @@ -901,11 +935,13 @@ } }, touch: function(event) { module.determine.eventOnElement(event, function() { if(event.type == 'touchstart') { - module.timer = setTimeout(module.hide, settings.delay.touch); + module.timer = setTimeout(function() { + module.hide(); + }, settings.delay.touch); } else if(event.type == 'touchmove') { clearTimeout(module.timer); } }); @@ -951,19 +987,21 @@ module.verbose('Hiding sub-menu', $subMenu); module.animate.hide(false, $subMenu); }, settings.delay.hide); } }, + touchend: function() { + }, click: function (event) { var - $choice = $(this), - $target = (event) + $choice = $(this), + $target = (event) ? $(event.target) : $(''), - $subMenu = $choice.find(selector.menu), - text = module.get.choiceText($choice), - value = module.get.choiceValue($choice, text), + $subMenu = $choice.find(selector.menu), + text = module.get.choiceText($choice), + value = module.get.choiceValue($choice, text), hasSubMenu = ($subMenu.length > 0), isBubbledEvent = ($subMenu.find($target).length > 0) ; if(!isBubbledEvent && (!hasSubMenu || settings.allowCategorySelection)) { if(!settings.useLabels) { @@ -986,11 +1024,11 @@ ; if(isShortcutKey) { var $label = $module.find(selector.label), $activeLabel = $label.filter('.' + className.active), - activeValue = $activeLabel.data('value'), + activeValue = $activeLabel.data(metadata.value), labelIndex = $label.index($activeLabel), labelCount = $label.length, hasActiveLabel = ($activeLabel.length > 0), hasMultipleActive = ($activeLabel.length > 1), isFirstLabel = (labelIndex === 0), @@ -1112,20 +1150,21 @@ $parentMenu = $selectedItem.closest(selector.menu), inVisibleMenu = ($parentMenu.hasClass(className.visible) || $parentMenu.hasClass(className.animating) || $parentMenu.parent(selector.menu).length > 0), hasSubMenu = ($subMenu.length> 0), hasSelectedItem = ($selectedItem.length > 0), selectedIsSelectable = ($selectedItem.not(selector.unselectable).length > 0), + delimiterPressed = (pressedKey == keys.delimiter && settings.allowAdditions && module.is.multiple()), $nextItem, isSubMenuItem, newIndex ; // visible menu keyboard shortcuts if( module.is.visible() ) { // enter (select or open sub-menu) - if(pressedKey == keys.enter || pressedKey == keys.delimiter) { + if(pressedKey == keys.enter || delimiterPressed) { if(pressedKey == keys.enter && hasSelectedItem && hasSubMenu && !settings.allowCategorySelection) { module.verbose('Pressed enter on unselectable category, opening sub menu'); pressedKey = keys.rightArrow; } else if(selectedIsSelectable) { @@ -1238,11 +1277,11 @@ } } else { // delimiter key - if(pressedKey == keys.delimiter) { + if(delimiterPressed) { event.preventDefault(); } // down arrow (open menu) if(pressedKey == keys.downArrow) { module.verbose('Down key pressed, showing dropdown'); @@ -1349,20 +1388,30 @@ ; module.set.selected(value, $(this)); module.hideAndClear(); }, - hide: function() { + hide: function(text, value) { + module.set.value(value); module.hideAndClear(); } }, get: { id: function() { return id; }, + defaultText: function() { + return $module.data(metadata.defaultText); + }, + defaultValue: function() { + return $module.data(metadata.defaultValue); + }, + placeholderText: function() { + return $module.data(metadata.placeholderText) || ''; + }, text: function() { return $text.text(); }, query: function() { return $.trim($search.val()); @@ -1507,25 +1556,25 @@ $choice.find(selector.menuIcon).remove(); } return ($choice.data(metadata.text) !== undefined) ? $choice.data(metadata.text) : (preserveHTML) - ? $choice.html().trim() - : $choice.text().trim() + ? $.trim($choice.html()) + : $.trim($choice.text()) ; } }, choiceValue: function($choice, choiceText) { choiceText = choiceText || module.get.choiceText($choice); if(!$choice) { return false; } return ($choice.data(metadata.value) !== undefined) - ? $choice.data(metadata.value) + ? String( $choice.data(metadata.value) ) : (typeof choiceText === 'string') - ? choiceText.toLowerCase().trim() - : choiceText + ? $.trim(choiceText.toLowerCase()) + : String(choiceText) ; }, inputEvent: function() { var input = $search[0] @@ -1624,11 +1673,11 @@ ? module.get.values() : module.get.text() ; shouldSearch = (isMultiple) ? (value.length > 0) - : (value !== undefined && value !== '' && value !== null) + : (value !== undefined && value !== null) ; isMultiple = (module.is.multiple() && $.isArray(value)); strict = (value === '' || value === 0) ? true : strict || false @@ -1644,11 +1693,11 @@ // safe early exit if(optionValue === null || optionValue === undefined) { return; } if(isMultiple) { - if($.inArray(optionValue.toString(), value) !== -1 || $.inArray(optionText, value) !== -1) { + if($.inArray( String(optionValue), value) !== -1 || $.inArray(optionText, value) !== -1) { $selectedItem = ($selectedItem) ? $selectedItem.add($choice) : $choice ; } @@ -1659,11 +1708,11 @@ $selectedItem = $choice; return true; } } else { - if( optionValue.toString() == value.toString() || optionText == value) { + if( String(optionValue) == String(value) || optionText == value) { module.verbose('Found select item by value', optionValue, value); $selectedItem = $choice; return true; } } @@ -1709,19 +1758,25 @@ module.restore.defaultText(); module.restore.defaultValue(); }, defaultText: function() { var - defaultText = $module.data(metadata.defaultText) + defaultText = module.get.defaultText(), + placeholderText = module.get.placeholderText ; - module.debug('Restoring default text', defaultText); - module.set.text(defaultText); - $text.addClass(className.placeholder); + if(defaultText === placeholderText) { + module.debug('Restoring default placeholder text', defaultText); + module.set.placeholderText(defaultText); + } + else { + module.debug('Restoring default text', defaultText); + module.set.text(defaultText); + } }, defaultValue: function() { var - defaultValue = $module.data(metadata.defaultValue) + defaultValue = module.get.defaultValue() ; if(defaultValue !== undefined) { module.debug('Restoring default value', defaultValue); if(defaultValue !== '') { module.set.value(defaultValue); @@ -1829,11 +1884,11 @@ }, placeholderText: function() { var text ; - if($text.hasClass(className.placeholder)) { + if(settings.placeholder !== false && $text.hasClass(className.placeholder)) { text = module.get.text(); module.verbose('Saving placeholder text as', text); $module.data(metadata.placeholderText, text); } }, @@ -1863,12 +1918,12 @@ module.set.value(''); }, scrollPage: function(direction, $selectedItem) { var - $selectedItem = $selectedItem || module.get.selectedItem(), - $menu = $selectedItem.closest(selector.menu), + $currentItem = $selectedItem || module.get.selectedItem(), + $menu = $currentItem.closest(selector.menu), menuHeight = $menu.outerHeight(), currentScroll = $menu.scrollTop(), itemHeight = $item.eq(0).outerHeight(), itemsPerPage = Math.floor(menuHeight / itemHeight), maxScroll = $menu.prop('scrollHeight'), @@ -1879,12 +1934,12 @@ isWithinRange, $nextSelectedItem, elementIndex ; elementIndex = (direction == 'up') - ? $selectableItem.index($selectedItem) - itemsPerPage - : $selectableItem.index($selectedItem) + itemsPerPage + ? $selectableItem.index($currentItem) - itemsPerPage + : $selectableItem.index($currentItem) + itemsPerPage ; isWithinRange = (direction == 'up') ? (elementIndex >= 0) : (elementIndex < $selectableItem.length) ; @@ -1894,11 +1949,11 @@ ? $selectableItem.first() : $selectableItem.last() ; if($nextSelectedItem.length > 0) { module.debug('Scrolling page', direction, $nextSelectedItem); - $selectedItem + $currentItem .removeClass(className.selected) ; $nextSelectedItem .addClass(className.selected) ; @@ -1936,16 +1991,14 @@ }, loading: function() { $module.addClass(className.loading); }, placeholderText: function(text) { - text = text || $module.data(metadata.placeholderText); - if(text) { - module.debug('Restoring placeholder text'); - module.set.text(text); - $text.addClass(className.placeholder); - } + text = text || module.get.placeholderText(); + module.debug('Setting placeholder text', text); + module.set.text(text); + $text.addClass(className.placeholder); }, tabbable: function() { if( module.has.search() ) { module.debug('Added tabindex to searchable dropdown'); $search @@ -1970,10 +2023,18 @@ }, initialLoad: function() { module.verbose('Setting initial load'); initialLoad = true; }, + activeItem: function($item) { + if( settings.allowAdditions && $item.filter(selector.addition).length > 0 ) { + $item.addClass(className.filtered); + } + else { + $item.addClass(className.active); + } + }, scrollPosition: function($item, forceScroll) { var edgeTolerance = 5, $menu, hasActive, @@ -2024,14 +2085,16 @@ else { $combo.text(text); } } else { + if(text !== module.get.placeholderText()) { + $text.removeClass(className.placeholder); + } module.debug('Changing text', text, $text); $text .removeClass(className.filtered) - .removeClass(className.placeholder) ; if(settings.preserveHTML) { $text.html(text); } else { @@ -2093,12 +2156,12 @@ value: function(value, text, $selected) { var hasInput = ($input.length > 0), isAddition = !module.has.value(value), currentValue = module.get.values(), - stringValue = (typeof value == 'number') - ? value.toString() + stringValue = (value !== undefined) + ? String(value) : value, newValue ; if(hasInput) { if(stringValue == currentValue) { @@ -2111,19 +2174,26 @@ if( module.is.single() && module.has.selectInput() && module.can.extendSelect() ) { module.debug('Adding user option', value); module.add.optionValue(value); } module.debug('Updating input value', value, currentValue); + internalChange = true; $input .val(value) - .trigger('change') ; + if(settings.fireOnInit === false && module.is.initialLoad()) { + module.debug('Input native change event ignored on initial load'); + } + else { + $input.trigger('change'); + } + internalChange = false; } else { module.verbose('Storing value in metadata', value, $input); if(value !== currentValue) { - $module.data(metadata.value, value); + $module.data(metadata.value, stringValue); } } if(settings.fireOnInit === false && module.is.initialLoad()) { module.verbose('No callback on initial load', settings.onChange); } @@ -2186,18 +2256,18 @@ module.save.remoteData(selectedText, selectedValue); } if(settings.useLabels) { module.add.value(selectedValue, selectedText, $selected); module.add.label(selectedValue, selectedText, shouldAnimate); - $selected.addClass(className.active); + module.set.activeItem($selected); module.filterActive(); module.select.nextAvailable($selectedItem); } else { module.add.value(selectedValue, selectedText, $selected); module.set.text(module.add.variables(message.count)); - $selected.addClass(className.active); + module.set.activeItem($selected); } } else if(!isFiltered) { module.debug('Selected active value, removing label'); module.remove.selected(selectedValue); @@ -2306,11 +2376,12 @@ } }, userSuggestion: function(value) { var $addition = $menu.children(selector.addition), - alreadyHasValue = module.get.item(value), + $existingItem = module.get.item(value), + alreadyHasValue = $existingItem && $existingItem.not(selector.addition).length, hasUserSuggestion = $addition.length > 0, html ; if(settings.useLabels && module.has.maxSelections()) { return; @@ -2321,14 +2392,15 @@ } $item .removeClass(className.selected) ; if(hasUserSuggestion) { - html = settings.templates.addition(value); + html = settings.templates.addition( module.add.variables(message.addResult, value) ); $addition .html(html) - .data(metadata.value, value) + .attr('data-' + metadata.value, value) + .attr('data-' + metadata.text, value) .removeClass(className.filtered) .addClass(className.selected) ; module.verbose('Replacing user suggestion with new value', $addition); } @@ -2339,11 +2411,11 @@ .addClass(className.selected) ; module.verbose('Adding item choice to menu corresponding with user choice addition', $addition); } }, - variables: function(message) { + variables: function(message, term) { var hasCount = (message.search('{count}') !== -1), hasMaxCount = (message.search('{maxCount}') !== -1), hasTerm = (message.search('{term}') !== -1), values, @@ -2358,11 +2430,11 @@ if(hasMaxCount) { count = module.get.selectionCount(); message = message.replace('{maxCount}', settings.maxSelections); } if(hasTerm) { - query = module.get.query(); + query = term || module.get.query(); message = message.replace('{term}', query); } return message; }, value: function(addedValue, addedText, $selectedItem) { @@ -2393,11 +2465,11 @@ newValue = newValue.join(settings.delimiter); module.debug('Setting hidden input to delimited value', newValue, $input); } if(settings.fireOnInit === false && module.is.initialLoad()) { - module.verbose('No callback on initial load', settings.onAdd); + module.verbose('Skipping onadd callback on initial load', settings.onAdd); } else { settings.onAdd.call(element, addedValue, addedText, $selectedItem); } module.set.value(newValue, addedValue, addedText, $selectedItem); @@ -2430,11 +2502,11 @@ }, filteredItem: function() { if(settings.useLabels && module.has.maxSelections() ) { return; } - if(settings.useLabels) { + if(settings.useLabels && module.is.multiple()) { $item.not('.' + className.active).removeClass(className.filtered); } else { $item.removeClass(className.filtered); } @@ -2491,11 +2563,16 @@ module.remove.value(selectedValue, selectedText, $selected); module.remove.label(selectedValue); } else { module.remove.value(selectedValue, selectedText, $selected); - module.set.text(module.add.variables(message.count)); + if(module.get.selectionCount() === 0) { + module.set.placeholderText(); + } + else { + module.set.text(module.add.variables(message.count)); + } } } else { module.remove.value(selectedValue, selectedText, $selected); } @@ -2563,20 +2640,23 @@ $labels = $labels || $module.find(selector.label); module.verbose('Removing labels', $labels); $labels .each(function(){ var - value = $(this).data('value'), - isUserValue = module.is.userValue(value) + value = $(this).data(metadata.value), + stringValue = (value !== undefined) + ? String(value) + : value, + isUserValue = module.is.userValue(stringValue) ; if(isUserValue) { - module.remove.value(value); - module.remove.label(value); + module.remove.value(stringValue); + module.remove.label(stringValue); } else { // selected will also remove label - module.remove.selected(value); + module.remove.selected(stringValue); } }) ; }, tabbable: function() { @@ -2643,10 +2723,13 @@ return (settings.maxSelections && module.get.selectionCount() >= settings.maxSelections); }, allResultsFiltered: function() { return ($item.filter(selector.unselectable).length === $item.length); }, + query: function() { + return (module.get.query() !== ''); + }, value: function(value) { var values = module.get.values(), hasValue = $.isArray(values) ? values && ($.inArray(value, values) !== -1) @@ -3149,11 +3232,11 @@ forceSelection : true, // force a choice on blur with search selection allowAdditions : false, // whether multiple select should allow user added values maxSelections : false, // When set to a number limits the number of selections to this count useLabels : true, // whether multiple select should filter currently active selections from choices - delimiter : ',', // when multiselect uses normal <input> the values will be delmited with this character + delimiter : ',', // when multiselect uses normal <input> the values will be delimited with this character showOnFocus : true, // show menu on focus allowTab : true, // add tabindex to element allowCategorySelection : false, // allow elements with sub-menus to be selected @@ -3223,10 +3306,17 @@ placeholderText : 'placeholder', text : 'text', value : 'value' }, + // property names for remote query + fields: { + values : 'values', // grouping for all dropdown values + name : 'name', // displayed dropdown text + value : 'value' // actual dropdown value + }, + selector : { addition : '.addition', dropdown : '.ui.dropdown', icon : '> .dropdown.icon', input : '> input[type="hidden"], > select', @@ -3293,16 +3383,16 @@ html += '</div>'; return html; }, // generates just menu from select - menu: function(response) { + menu: function(response, fields) { var values = response.values || {}, html = '' ; - $.each(response.values, function(index, option) { - html += '<div class="item" data-value="' + option.value + '">' + option.name + '</div>'; + $.each(response[fields.values], function(index, option) { + html += '<div class="item" data-value="' + option[fields.value] + '">' + option[fields.name] + '</div>'; }); return html; }, // generates label for multiselect