From b2fa1120bb59bfa9226d865ac18102e81942edcb Mon Sep 17 00:00:00 2001 From: L3Home <50602111+L3Home@users.noreply.github.com> Date: Mon, 13 May 2019 17:45:06 -0700 Subject: [PATCH] Update fSelect.js Added checkbox for Selecting All visible options (deselects too). Fixed issue with the HTML5 'x' button that appears in search-type inputs (now it correctly clears the search and makes all options visible). --- fSelect.js | 32 +++++++++++++++++++++++++++----- 1 file changed, 27 insertions(+), 5 deletions(-) diff --git a/fSelect.js b/fSelect.js index 1fe7d81..5cccf51 100644 --- a/fSelect.js +++ b/fSelect.js @@ -1,4 +1,4 @@ -/* fSelect 1.0.1 - https://github.com/mgibbs189/fselect */ +/* fSelect 1.0.2 - https://github.com/mgibbs189/fselect */ (function($) { @@ -35,7 +35,9 @@ searchText: 'Search', noResultsText: 'No results found', showSearch: true, - optionFormatter: false + optionFormatter: false, + showSelectAll: true, + multiSelect: false, }, options); } @@ -59,6 +61,7 @@ this.optgroup = 0; this.selected = [].concat(this.$select.val()); // force an array this.settings.multiple = this.$select.is('[multiple]'); + if (this.settings.multiSelect) this.settings.multiple = true; // allows it to be set in options at initialization var search_html = ''; var no_results_html = ''; @@ -101,6 +104,11 @@ var $this = this; var choices = ''; + + if (this.settings.showSelectAll && this.settings.multiple) { // selectall shows only w/ multi-select + choices += '
Select All
'; + } + $element.children().each(function(i, el) { var $el = $(el); @@ -187,7 +195,7 @@ 'idx': -1 }; - $(document).on('click', '.fs-option:not(.hidden, .disabled)', function(e) { + $(document).on('click', '.fs-option:not(.hidden, .disabled), .fs-selectall:not(.hidden, .disabled)', function(e) { var $wrap = $(this).closest('.fs-wrap'); var $select = $wrap.find('select'); var do_close = false; @@ -197,7 +205,21 @@ return; } - if ($wrap.hasClass('multiple')) { + var is_selectall = $(this).hasClass('fs-selectall'); // is clicked element SelectAll? + if (is_selectall) { + var selected = []; + var addOrRemove = ! $(this).hasClass('selected'); + $wrap.find('.fs-option') + .not('.hidden, .disabled') // this allows the Select All to only affect visible items (such as ones that are matching the search); others are UNAFFECTED + .each(function() { + $(this).toggleClass('selected', addOrRemove); + }); + $wrap.find('.fs-option.selected').each(function(i, el) { // pushes in all selected items, even those that are hidden (so they're still included, as desired) + selected.push($(el).attr('data-value')); + }); + $(this).toggleClass('selected'); + } + else if ($wrap.hasClass('multiple')) { var selected = []; // shift + click support @@ -243,7 +265,7 @@ } }); - $(document).on('keyup', '.fs-search input', function(e) { + $(document).on('keyup search', '.fs-search input', function(e) { // HTML5 'x to clear' requires 'search' event listener to update immediately! if (40 == e.which) { // down $(this).blur(); return;