grisel

grisel

grisel (GRId_SELect) is a custom multi- or single-select control (over standard <select>).
Represents options as paginated grid.
Features search and filter by first letter.
Customizable. Has cool animations. Useful for big list of options.

How it looks:

Getting started:

1) Include this JS/CSS: ``` ``` 2) Add class "grisel" to <select>'s you want to convert.
3) Customize options. Example: ``` ``` Also you can override options for particular <select> by using 'data-*'. Example: ``` ... ```

Notes:

Popup can be in extended view (with search and filter by first char) or compact - see options isExt, minPagesForExt.
Options list can contain special "any"-option, to be able to select all/any values by one click (and send to server), see options anyVal, hideAny.

Options:

Key	Description	Default value
General
gridRows	Number of options rows in grid	5
gridColumns	Number of options columns in grid	3
minPagesForExt	If list of options has pages >= this value, popup will be in extended view mode (with search and filter by first char)	3
isExt	Show popup in extended view mode? -1 for auto applying extended mode (by option minPagesForExt), 1/0 to force extended mode on/off	-1
anyVal	Value attribute of special <oprion> "All values" (or "Any value") (if there is one in options)	'a-n-y'
hideAny	Hide special "any"-option?	false
gridDirectionHorizontal	How options should be filled in grid? 1 - fill items in left-to-right direction (horizontal) (in html group by rows), 0 - up-to-down direction (vertical) (in html group by cols)	false
useRowsStyleForVerticalDirection	1 - force group by rows (not cols) in html for vertical direction (to make all elements in one row having equal height) 1 is highly recommended (also because of animation problems with cols)	true
openOnHover	1 - open popup by hover on selector, 0 - open by click	false
areInnerCtrlsFocuable	Add tabindex attribute for all controls (options, inputs, buttons) in popup?	false
maxCntToShowListAsValStr	For example. When set to 4: for 5+ selected values selector text will be "X values", for 1-4 - "valA, valB, valC, valD", for 0 - one of allStr/anyStr/allStrDefault. When set to -1: always "X values"	3
Show/hide elements
showPagesList		true
showSearch		true
showIndex		true
showControls		true
hidePageControlsWhenThereIsPageList		true
showCtrlSaveSelection		true
showCtrlShowSelection		true
showCtrlGotoSelection		true
showCtrlClearAll		true
showCloseCross		true
Sizes
divSelWidth	-2 - equal to <select>'s width, -1 - equal to wrapper's width, 0 - auto, > 0 - concrete width	0
divSelHeight	-2 - equal to <select>'s height, -1 - equal to wrapper's height, 0 - auto, > 0 - concrete height	0
divSelPaddingLeft	Left padding of selector's text, in px	8
divSelIsMultiline	Show selector's text as multiline?	false
divSelClasses	Optional list of classes for selector divided by ' '	''
divPopupWidth	-2 - equal to wrapper's width, -1 - equal to sel's width, 0 - auto, > 0 - concrete width	0
divPopupHeight	0 - use css, > 0 - concrete height	0
divPopupLabelsMinWidth	For auto popup width - set min checkbox/radio's labels width	0
divPopupClasses	Optional list of classes for popup win divided by ' '	''
divWrapperClasses	Optional list of classes for selector's wrapper divided by ' '	''
tryToKeepConstPopupHeight	When page with long labels appeared, keep new bigger popup height for all other pages	true
reserveForPopupHeight	Reserve (once) more height for popup (for case of appearing long labels at next pages), in px	0
Animation
animatePopupDuration	Duration in ms for open & close animations	[600, 400]
isElasticPopupAnimation	Is animation elastic for open & close? If yes, some tricks will be applied for smoother animation	[1, 0]
animatePopupEasing	Easing function names for open & close animations	['easeOutElastic', 'easeInOutBack']
animatePageDuration	Duration of animation of switching pages	150
animatePageEasing	Easing function name of animation of switching pages	'swing'
"Legacy" options (made for dom-plus.ua)
flushSearchStringAfterSelection	When using search, clear search string after every selection	false
showSelectedItemsWhenNoFound	When using search and no options found, show selected items anyway	false
showSelectedItemsFirst	In options list show selected items first, but after "any"-option	false
maxSelectionLimit	Only for showSelectedItemsFirst==1. If count of selected items > this value, warning (see string "maxSelectionMsg") will be shown	0

Strings:

Key	Description	Default value for english
indexAll	First button in index by first char, which clears filter by first char	'All'
ctrlSaveSelection	Button that closes popup, like 'X' at bottom-right	'Save'
ctrlGotoSelection	Button to goto page with selected option (for single-select)	'Go to selected'
ctrlShowSelection	Button to show only selected options	'Show selected'
ctrlClearAll	Button to clear selection. First for multi-select, second for single-select	['Clear all', 'Clear selection']
allStr	Selector text when all options are selected, for overriding in 'stringsBySelId', 'stringsBySelClass'	''
allStrDefault	Default selector text when all options are selected. First for multi-select, second for single-select	['All', 'Any']
noSelectionMsg	Text when no option is selected. Only for option hideAny == 1	'No selected'
noResultsMsg	Text when filter gaven't any results	'Nothing found'
inputPlaceholder	Placeholder text for search input	'Enter a name'
cntFmt	Template to format selector text	'{cnt} {cnt_name}'
cntNames	Declensions of word 'value': for english - [singular, plural, plural], for russian - [ед.им., ед.род., мн.род.]	['value', 'values', 'values']
maxSelectionMsg	Only for option maxSelectionLimit > 0 ("legacy"). Warning text when count of selected items > maxSelectionLimit	'You reached max number of selected elements.<br>Please save your selection'

Examples:

See demo.html

Browsers support:

Requires browser with CSS3 support (for flex).