26 | ```
27 |
28 | ###### if you want to change settings:
29 | ```javascript
30 | $('#selectBox').selectator({
31 | prefix: 'selectator_', // CSS class prefix
32 | height: 'auto', // Auto or element
33 | useDimmer: false, // Dims the screen when option list is visible
34 | useSearch: true, // If false, the search boxes are removed and
35 | // `showAllOptionsOnFocus` is forced to true
36 | showAllOptionsOnFocus: false, // Show the dropdown immediately when the control receives focus
37 | selectFirstOptionOnSearch: true, // Selects the topmost option on every search
38 | keepOpen: false, // If true, then the dropdown will not close when
39 | // selecting options, but stay open until losing focus
40 | submitCallback: function(value){}, // Callback function when enter is pressed and
41 | // no option is active in multi select box
42 | placeholder: '', // Placeholder text for the select, can also be
43 | // set on select element
44 | load: function(search, callback){ // Callback function when using remote data
45 | callback(results);
46 | },
47 | delay: 0, // The amount of milleseconds to wait for doing a search
48 | minSearchLength: 0, // Mininum length of search string required for searching
49 | valueField: 'value', // The name of the property to use as the "value"
50 | // (not needed when custom rendering functions are defined)
51 | textField: 'text', // The name of the property to use as the "text"
52 | // (not needed when custom rendering functions are defined)
53 | searchFields: ['value', 'test'], // The fields to search in
54 | render: {
55 | selected_item: function (_item, escape) {
56 | var html = '';
57 | if (typeof _item.left !== 'undefined')
58 | html += '';
59 | if (typeof _item.right !== 'undefined')
60 | html += '' + escape(_item.right) + '
';
61 | html += '' + ((typeof _item.text !== 'undefined') ? escape(_item.text) : '') + '
';
62 | if (typeof _item.subtitle !== 'undefined')
63 | html += '' + escape(_item.subtitle) + '
';
64 | html += 'X
';
65 | return html;
66 | },
67 | option: function (_item, escape) {
68 | var html = '';
69 | if (typeof _item.left !== 'undefined')
70 | html += '';
71 | if (typeof _item.right !== 'undefined')
72 | html += '' + escape(_item.right) + '
';
73 | html += '' + ((typeof _item.text !== 'undefined') ? escape(_item.text) : '') + '
';
74 | if (typeof _item.subtitle !== 'undefined')
75 | html += '' + escape(_item.subtitle) + '
';
76 | return html;
77 | }
78 | },
79 | labels: {
80 | search: 'Search...' // Placeholder text in search box in single select box
81 | }
82 | });
83 | ```
84 |
85 | ###### Extra attributes for option tags
86 | By using `data-left`, `data-right`, `data-subtitle` or any other attributes you can extend the information made available to the renderers.
87 | The default ones `left`, `right` and `subtitle` can be styled through css, and are named `prefix_`title, `prefix_`left, `prefix_`right and `prefix_`subtitle.
88 | The `class` attributes from the original option and optgroup elements are also added to the genererated elements
89 |
90 | ```html
91 |
92 |
93 | This is the title
94 |
95 | This is the title
96 |
97 | ```
98 | It will be displayed something like this this:
99 |
100 |
101 |
102 | Left
103 |
104 |
105 | Title
106 |
107 |
108 | Right
109 |
110 |
111 |
112 |
113 | Subtitle
114 |
115 |
116 |
117 |
118 |
119 | CSS classes
120 | -----------
121 | Here is a list of all the css classes
122 |
123 | Class | Description
124 | ------------------------------- | ------------------------------------------------------------------------------
125 | `prefix_`element | This is the new select box. It has some extra classes called `single` and `multiple`, which tell if it is a multiple selection or single selection select box. And also `options-visible` and `options-hidden` which tell if the options list is visible or not.
126 | `prefix_`selected_items | The holder for the selected items.
127 | `prefix_`selected_item | The holder for the selected item.
128 | `prefix_`selected_item_title | The title of the selected item.
129 | `prefix_`selected_item_left | The left section of the selected item.
130 | `prefix_`selected_item_right | The right section of the selected item.
131 | `prefix_`selected_item_subtitle | The bottom section of the selected item.
132 | `prefix_`selected_item_remove | The remove button for the selected item.
133 | `prefix_`input | This is the input box for the selectator. This is used together with `options-visible` or `options-hidden` to show and style it differently if it is a multiple selection box or a single selection box.
134 | `prefix_`textlength | This is used to calculate the size of the input box for the multiple selection box.
135 | `prefix_`options | The options list holder. This is used together with `options-visible` or `options-hidden` to show or hide the options.
136 | `prefix_`group_header | This is the group title option.
137 | `prefix_`group | This is the group options holder.
138 | `prefix_`option | This is a result option. It has an extra class called `active` which tells if the option is the active one.
139 | `prefix_`option_title | The title of the result option.
140 | `prefix_`option_left | The left section of the result option.
141 | `prefix_`option_right | The right section of the result option.
142 | `prefix_`option_subtitle | The bottom section of the result option.
143 | `prefix_`mask | This is the mask (dimmer)
144 |
145 |
146 | DOM Structure
147 | -------------
148 | * mask
149 | * element: *containing the `single`|`multiple` class and the `options-visible`|`options-hidden` class*
150 | * textlength
151 | * selected_items
152 | * selected_item
153 | * selected_item_left
154 | * selected_item_right
155 | * selected_item_title
156 | * selected_item_subtitle
157 | * selected_item_remove
158 | * selected_item...
159 | * input
160 | * options
161 | * group_header
162 | * group
163 | * option: *containing the `active` class*
164 | * option_left
165 | * option_right
166 | * option_title
167 | * option_subtitle
168 | * option...
169 | * option: *containing the `active` class*
170 | * option_left
171 | * option_right
172 | * option_title
173 | * option_subtitle
174 | * option...
175 |
176 |
177 | jQuery methods
178 | --------------
179 | Method | Description
180 | ------------------ | -----------
181 | removeSelection | This method is used to deselect current option, if applicable.
182 | hideDropdown | This method is used to options dropdown.
183 | refresh | This method is used to refresh the plugin. A scenario where this would be useful is if the data in the original select box is changed by some other script.
184 | destroy | This method is used to remove the instance of the plugin from the select box and restore it to its original state.
185 |
186 |
187 | ###### Method usage
188 | ```javascript
189 | $('#selectBox').selectator('removeSelection');
190 | ```
191 | ```javascript
192 | $('#selectBox').selectator('hideDropdown');
193 | ```
194 | ```javascript
195 | $('#selectBox').selectator('refresh');
196 | ```
197 | ```javascript
198 | $('#selectBox').selectator('destroy');
199 | ```
200 |
201 |
202 | Browser compatibility
203 | ---------------------
204 | * IE 8+
205 | * Chrome 2+
206 | * Firefox 3.5+
207 | * Safari 4+
208 | * Opera 11+
209 |
210 |
211 | Internationalization
212 | --------------------
213 | Selectator supports language by setting labels through the plugin options.
214 |
215 |
216 | Copyright and license
217 | ---------------------
218 | The MIT License (MIT)
219 |
220 | Copyright (c) 2013 Qodio
221 |
222 | Permission is hereby granted, free of charge, to any person obtaining a copy of
223 | this software and associated documentation files (the "Software"), to deal in
224 | the Software without restriction, including without limitation the rights to
225 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
226 | the Software, and to permit persons to whom the Software is furnished to do so,
227 | subject to the following conditions:
228 |
229 | The above copyright notice and this permission notice shall be included in all
230 | copies or substantial portions of the Software.
231 |
232 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
233 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
234 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
235 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
236 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
237 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
238 |
--------------------------------------------------------------------------------
/fm.selectator.jquery.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Selectator jQuery Plugin
3 | * A plugin for select elements
4 | * version 3.2, Apr 9th, 2020
5 | * by Ingi á Steinamørk
6 | */
7 | /* mask */
8 | #selectator_mask {
9 | background-color: transparent;
10 | width: 100%;
11 | height: 100%;
12 | left: 0;
13 | top: 0;
14 | bottom: 0;
15 | right: 0;
16 | position: fixed;
17 | z-index: 100;
18 | }
19 | #selectator_mask.selectator_mask_dimmed {
20 | background-color: rgba(0,0,0,0.1);
21 | }
22 | /* spinner keyframes */
23 | /* main element */
24 | .selectator_element {
25 | border: 1px solid #dcdcdc;
26 | box-sizing: border-box;
27 | background-color: #fff;
28 | display: inline-block;
29 | text-decoration: none;
30 | vertical-align: middle;
31 | border-radius: 2px;
32 | }
33 | .selectator_element * {
34 | box-sizing: border-box;
35 | text-decoration: none;
36 | }
37 | .selectator_element img {
38 | display: block;
39 | }
40 | .selectator_element.multiple {
41 | padding-right: 20px !important;
42 | padding-bottom: 5px !important;
43 | }
44 | .selectator_element.single {
45 | height: 36px;
46 | padding: 7px 10px !important;
47 | }
48 | .selectator_element.focused {
49 | box-shadow: 0 0 1px #39f;
50 | z-index: 101;
51 | }
52 | .selectator_element:after {
53 | position: absolute;
54 | cursor: pointer;
55 | content: '\25BC';
56 | font-size: 70%;
57 | transform: scaleY(0.75);
58 | right: 4px;
59 | color: rgba(0,0,0,0.75);
60 | top: 50%;
61 | line-height: 0;
62 | }
63 | .selectator_element.loading:before {
64 | border: 3px solid rgba(0,0,0,0.1);
65 | border-top: 3px solid rgba(0,0,0,0.5);
66 | border-radius: 50%;
67 | width: 14px;
68 | line-height: 0;
69 | height: 14px;
70 | margin-top: -10px;
71 | animation: selectator_spinner 500ms linear infinite;
72 | content: '';
73 | position: absolute;
74 | right: 20px;
75 | top: 50%;
76 | }
77 | /* selected items */
78 | .selectator_selected_items .selectator_placeholder {
79 | font-size: 80%;
80 | color: rgba(0,0,0,0.5);
81 | }
82 | .single .selectator_selected_items {
83 | display: block;
84 | }
85 | .multiple .selectator_selected_items {
86 | display: inline;
87 | }
88 | .selectator_selected_items .selectator_selected_item {
89 | color: rgba(0,0,0,0.75);
90 | position: relative;
91 | vertical-align: top;
92 | }
93 | .single .selectator_selected_items .selectator_selected_item {
94 | background-color: transparent;
95 | display: block;
96 | margin: 0;
97 | padding: 0;
98 | font-size: inherit;
99 | text-decoration: none;
100 | }
101 | .multiple .selectator_selected_items .selectator_selected_item {
102 | background-color: #fafafa;
103 | display: inline-block;
104 | margin: 5px 0 0 5px;
105 | padding: 3px 20px 2px 5px;
106 | font-size: 80%;
107 | border-radius: 2px;
108 | border: 1px solid #dcdcdc;
109 | }
110 | .selectator_selected_items .selectator_selected_item .selectator_selected_item_left {
111 | float: left;
112 | }
113 | .single .selectator_selected_items .selectator_selected_item .selectator_selected_item_left {
114 | float: left;
115 | width: 30px;
116 | margin-top: -2px;
117 | }
118 | .single .selectator_selected_items .selectator_selected_item .selectator_selected_item_left img {
119 | height: 22px;
120 | border-radius: 2px;
121 | }
122 | .multiple .selectator_selected_items .selectator_selected_item .selectator_selected_item_left {
123 | float: left;
124 | width: 22px;
125 | margin-top: -1px;
126 | margin-left: -2px;
127 | }
128 | .multiple .selectator_selected_items .selectator_selected_item .selectator_selected_item_left img {
129 | height: 18px;
130 | border-radius: 2px;
131 | }
132 | .single .selectator_selected_items .selectator_selected_item .selectator_selected_item_title {
133 | height: auto;
134 | line-height: 1.3;
135 | }
136 | .multiple .selectator_selected_items .selectator_selected_item .selectator_selected_item_title {
137 | float: left;
138 | padding-top: 1px;
139 | padding-bottom: 1px;
140 | }
141 | .selectator_selected_items .selectator_selected_item .selectator_selected_item_subtitle {
142 | display: none;
143 | }
144 | .single .selectator_selected_items .selectator_selected_item .selectator_selected_item_right {
145 | float: right;
146 | background-color: #ac6;
147 | color: #fff;
148 | font-weight: bold;
149 | font-size: 80%;
150 | text-align: center;
151 | line-height: 16px;
152 | border-radius: 12px;
153 | padding: 2px 12px;
154 | margin-right: 40px;
155 | }
156 | .multiple .selectator_selected_items .selectator_selected_item .selectator_selected_item_right {
157 | display: none;
158 | }
159 | .single .selectator_selected_items .selectator_selected_item .selectator_selected_item_remove {
160 | display: block;
161 | position: absolute;
162 | right: 16px;
163 | cursor: pointer;
164 | font-size: 75%;
165 | font-weight: bold;
166 | color: rgba(0,0,0,0.75);
167 | padding: 2px;
168 | line-height: 0;
169 | top: 50%;
170 | transform: scaleX(1.2);
171 | }
172 | .multiple .selectator_selected_items .selectator_selected_item .selectator_selected_item_remove {
173 | display: inline-block;
174 | font-weight: bold;
175 | color: rgba(0,0,0,0.75);
176 | margin: 0 0 0 5px;
177 | cursor: pointer;
178 | font-size: 60%;
179 | line-height: 10px;
180 | vertical-align: top;
181 | border-radius: 0 2px 2px 0;
182 | position: absolute;
183 | right: 0;
184 | top: 0;
185 | bottom: 0;
186 | padding: 7px 5px 4px 5px;
187 | }
188 | .multiple .selectator_selected_items .selectator_selected_item .selectator_selected_item_remove:hover {
189 | background-color: rgba(0,0,0,0.1);
190 | }
191 | /* input field */
192 | .selectator_input,
193 | .selectator_textlength {
194 | border: 0;
195 | display: inline-block;
196 | margin: 0;
197 | background-color: transparent;
198 | font-size: 13px;
199 | outline: none;
200 | }
201 | .multiple .selectator_input,
202 | .multiple .selectator_textlength {
203 | padding: 3px 0 0 0;
204 | margin: 7px 0 2px 5px;
205 | }
206 | .single .selectator_input {
207 | border: 1px solid #7f9db9;
208 | position: absolute;
209 | bottom: -40px;
210 | left: -1px;
211 | z-index: 101;
212 | padding: 10px 25px;
213 | width: 100%;
214 | width: calc(100% + 2px);
215 | border-bottom: 0;
216 | background-color: #f6f6f6;
217 | color: #333;
218 | font-size: inherit;
219 | box-shadow: 0 8px 24px rgba(0,0,0,0.1);
220 | }
221 | .single.options-hidden .selectator_input {
222 | opacity: 0;
223 | position: absolute;
224 | left: -10000px;
225 | }
226 | .single.options-visible .selectator_input {
227 | opacity: 1;
228 | }
229 | .disable_search .selectator_input {
230 | opacity: 0;
231 | padding: 0 1px 1px 0 !important;
232 | }
233 | /* options */
234 | .selectator_options {
235 | margin: 0;
236 | padding: 0;
237 | border: 1px solid #7f9db9;
238 | border-radius: 0 0 3px 3px;
239 | position: absolute;
240 | box-sizing: border-box;
241 | -moz-box-sizing: border-box;
242 | z-index: 101;
243 | background-color: #fff;
244 | overflow-y: scroll;
245 | max-height: 250px;
246 | list-style: none;
247 | left: -1px;
248 | right: -1px;
249 | box-shadow: 0 8px 24px rgba(0,0,0,0.1);
250 | }
251 | .disable_search .selectator_options {
252 | border-top: 1px solid #7f9db9;
253 | }
254 | .single.disable_search .selectator_options {
255 | padding-top: 0;
256 | }
257 | .options-hidden .selectator_options {
258 | display: none;
259 | }
260 | .selectator_options .selectator_group {
261 | padding: 5px;
262 | font-weight: bold;
263 | }
264 | .selectator_options .selectator_option {
265 | padding: 5px;
266 | cursor: pointer;
267 | color: #000;
268 | min-height: 36px;
269 | }
270 | .selectator_options .selectator_option.selectator_group_option {
271 | padding-left: 20px;
272 | }
273 | .selectator_options .selectator_option:before,
274 | .selectator_options .selectator_option:after {
275 | content: "";
276 | display: table;
277 | }
278 | .selectator_options .selectator_option:after {
279 | clear: both;
280 | }
281 | .selectator_options .selectator_option .selectator_option_left {
282 | float: left;
283 | }
284 | .selectator_options .selectator_option .selectator_option_left img {
285 | height: 30px;
286 | border-radius: 2px;
287 | }
288 | .selectator_options .selectator_option .selectator_option_title {
289 | margin-left: 40px;
290 | }
291 | .selectator_options .selectator_option .selectator_option_subtitle {
292 | font-size: 70%;
293 | color: rgba(0,0,0,0.5);
294 | margin-top: -4px;
295 | margin-bottom: -1px;
296 | margin-left: 40px;
297 | }
298 | .selectator_options .selectator_option .selectator_option_right {
299 | float: right;
300 | background-color: #ac6;
301 | color: #fff;
302 | font-weight: bold;
303 | font-size: 80%;
304 | text-align: center;
305 | line-height: 16px;
306 | border-radius: 12px;
307 | padding: 2px 12px;
308 | margin-top: 4px;
309 | }
310 | .selectator_options .selectator_option.active {
311 | background-color: #39f;
312 | color: #fff;
313 | }
314 | .selectator_options .selectator_option.active .selectator_option_subtitle {
315 | color: rgba(255,255,255,0.6);
316 | }
317 | @-moz-keyframes selectator_spinner {
318 | 0% {
319 | transform: rotate(0deg);
320 | }
321 | 100% {
322 | transform: rotate(360deg);
323 | }
324 | }
325 | @-webkit-keyframes selectator_spinner {
326 | 0% {
327 | transform: rotate(0deg);
328 | }
329 | 100% {
330 | transform: rotate(360deg);
331 | }
332 | }
333 | @-o-keyframes selectator_spinner {
334 | 0% {
335 | transform: rotate(0deg);
336 | }
337 | 100% {
338 | transform: rotate(360deg);
339 | }
340 | }
341 | @keyframes selectator_spinner {
342 | 0% {
343 | transform: rotate(0deg);
344 | }
345 | 100% {
346 | transform: rotate(360deg);
347 | }
348 | }
349 |
--------------------------------------------------------------------------------
/fm.selectator.jquery.js:
--------------------------------------------------------------------------------
1 | /*
2 | Selectator jQuery Plugin
3 | A plugin for select elements
4 | version 3.3, Oct 17th, 2020
5 | by Ingi á Steinamørk
6 |
7 | The MIT License (MIT)
8 |
9 | Copyright (c) 2013 QODIO
10 |
11 | Permission is hereby granted, free of charge, to any person obtaining a copy of
12 | this software and associated documentation files (the "Software"), to deal in
13 | the Software without restriction, including without limitation the rights to
14 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
15 | the Software, and to permit persons to whom the Software is furnished to do so,
16 | subject to the following conditions:
17 |
18 | The above copyright notice and this permission notice shall be included in all
19 | copies or substantial portions of the Software.
20 |
21 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
22 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
23 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
24 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
25 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
26 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
27 | */
28 |
29 | (function($) {
30 | 'use strict';
31 | $.selectator = function (_element, _options) {
32 | var defaults = {
33 | prefix: 'selectator_',
34 | height: 'auto',
35 | useDimmer: false,
36 | useSearch: true,
37 | showAllOptionsOnFocus: false,
38 | selectFirstOptionOnSearch: true,
39 | keepOpen: false,
40 | submitCallback: function () {},
41 | load: null,
42 | delay: 0,
43 | minSearchLength: 0,
44 | valueField: 'value',
45 | textField: 'text',
46 | searchFields: ['value', 'text'],
47 | placeholder: '',
48 | render: {
49 | selected_item: function (_item, escape) {
50 | var html = '';
51 | if (typeof _item.left !== 'undefined')
52 | html += '';
53 | if (typeof _item.right !== 'undefined')
54 | html += '' + escape(_item.right) + '
';
55 | html += '' + ((typeof _item.text !== 'undefined') ? escape(_item.text) : '') + '
';
56 | if (typeof _item.subtitle !== 'undefined')
57 | html += '' + escape(_item.subtitle) + '
';
58 | html += 'X
';
59 | return html;
60 | },
61 | option: function (_item, escape) {
62 | var html = '';
63 | if (typeof _item.left !== 'undefined')
64 | html += '';
65 | if (typeof _item.right !== 'undefined')
66 | html += '' + escape(_item.right) + '
';
67 | html += '' + ((typeof _item.text !== 'undefined') ? escape(_item.text) : '') + '
';
68 | if (typeof _item.subtitle !== 'undefined')
69 | html += '' + escape(_item.subtitle) + '
';
70 | return html;
71 | }
72 | },
73 | labels: {
74 | search: 'Search...'
75 | }
76 | };
77 |
78 | var self = this;
79 | self.options = {};
80 | self.$source_element = $(_element);
81 | self.$container_element = null;
82 | self.$selecteditems_element = null;
83 | self.$input_element = null;
84 | self.$textlength_element = null;
85 | self.$options_element = null;
86 | self.$mask_element = null;
87 | self.usefilterResults = true;
88 | var is_single = self.$source_element.attr('multiple') === undefined;
89 | var is_multiple = !is_single;
90 | var using_remote_data = false;
91 | var has_visible_options = true;
92 | var delayTimer = null;
93 | var key = {
94 | backspace: 8,
95 | tab: 9,
96 | enter: 13,
97 | shift: 16,
98 | ctrl: 17,
99 | alt: 18,
100 | capslock: 20,
101 | escape: 27,
102 | pageup: 33,
103 | pagedown: 34,
104 | end: 35,
105 | home: 36,
106 | left: 37,
107 | up: 38,
108 | right: 39,
109 | down: 40
110 | };
111 |
112 |
113 |
114 | // INITIALIZE PLUGIN
115 | self.init = function () {
116 | self.options = $.extend(true, {}, defaults, _options);
117 | $.each(self.$source_element.data(), function (_key, _value) {
118 | if (_key.substring(0, 10) === 'selectator') {
119 | self.options[_key.substring(10, 11).toLowerCase() + _key.substring(11)] = _value;
120 | }
121 | });
122 | self.options.searchFields = typeof self.options.searchFields === 'string' ? self.options.searchFields.split(' ') : self.options.searchFields;
123 | self.$source_element.find('option').each(function () {
124 | $(this).data('value', this.value);
125 | $(this).data('text', this.text);
126 | });
127 | using_remote_data = self.options.load !== null;
128 |
129 | //// ================== CREATE ELEMENTS ================== ////
130 | // mask
131 | self.$mask_element = $('#' + self.options.prefix + 'mask');
132 | if (self.$mask_element.length === 0) {
133 | self.$mask_element = $(document.createElement('div'));
134 | self.$mask_element.attr('id', self.options.prefix + 'mask');
135 | self.$mask_element.attr('onclick', 'void(0)');
136 | self.$mask_element.on('click', function () {
137 | $(':focus').blur();
138 | });
139 | self.$mask_element.hide();
140 | $(document.body).prepend(self.$mask_element);
141 | }
142 | // source element
143 | self.$source_element.addClass('selectator');
144 | if (self.$source_element.attr('placeholder')) {
145 | self.options.placeholder = self.$source_element.attr('placeholder');
146 | }
147 | // container element
148 | self.$container_element = $(document.createElement('div'));
149 | if (self.$source_element.attr('id') !== undefined) {
150 | self.$container_element.attr('id', self.options.prefix + self.$source_element.attr('id'));
151 | }
152 | self.$container_element.addClass(self.options.prefix + 'element ' + (is_multiple ? 'multiple ' : 'single ') + 'options-hidden');
153 | if (!self.options.useSearch) {
154 | self.$container_element.addClass('disable_search');
155 | }
156 | self.$container_element.css({
157 | width: self.$source_element.css('width'),
158 | minHeight: self.$source_element.css('height'),
159 | padding: self.$source_element.css('padding'),
160 | 'flex-grow': self.$source_element.css('flex-grow'),
161 | position: 'relative'
162 | });
163 | if (self.options.height === 'element') {
164 | self.$container_element.css({
165 | height: self.$source_element.outerHeight() + 'px'
166 | });
167 | }
168 | // textlength element
169 | self.$textlength_element = $(document.createElement('span'));
170 | self.$textlength_element.addClass(self.options.prefix + 'textlength');
171 | self.$textlength_element.css({
172 | position: 'absolute',
173 | visibility: 'hidden'
174 | });
175 | self.$container_element.append(self.$textlength_element);
176 | // selected items element
177 | self.$selecteditems_element = $(document.createElement('div'));
178 | self.$selecteditems_element.addClass(self.options.prefix + 'selected_items');
179 | self.$container_element.append(self.$selecteditems_element);
180 | // input element
181 | self.$input_element = $(document.createElement('input'));
182 | self.$input_element.addClass(self.options.prefix + 'input');
183 | self.$input_element.attr('tabindex', self.$source_element.attr('tabindex'));
184 | if (!self.options.useSearch) {
185 | self.$input_element.attr('readonly', true);
186 | self.$input_element.css({
187 | 'width': '0px',
188 | 'height': '0px',
189 | 'overflow': 'hidden',
190 | 'border': 0,
191 | 'padding': 0,
192 | 'position': 'absolute'
193 | });
194 | } else {
195 | if (is_single) {
196 | self.$input_element.attr('placeholder', self.options.labels.search);
197 | } else {
198 | if (self.options.placeholder !== '') {
199 | self.$input_element.attr('placeholder', self.options.placeholder);
200 | }
201 | self.$input_element.width(20);
202 | }
203 | }
204 | self.$input_element.attr('autocomplete', 'false');
205 | self.$container_element.append(self.$input_element);
206 | // options element
207 | self.$options_element = $(document.createElement('ul'));
208 | self.$options_element.addClass(self.options.prefix + 'options');
209 |
210 | self.$container_element.append(self.$options_element);
211 | self.$source_element.after(self.$container_element);
212 | self.$source_element.hide();
213 |
214 |
215 | //// ================== BIND ELEMENTS EVENTS ================== ////
216 |
217 | // source element
218 | self.$source_element.change(function () {
219 | renderSelectedItems();
220 | });
221 |
222 | // container element
223 | self.$container_element.on('focus', function () {
224 | self.$input_element.focus();
225 | self.$input_element.trigger('focus');
226 | });
227 | self.$container_element.on('mousedown', function (_e) {
228 | _e.preventDefault();
229 | self.$input_element.focus();
230 | self.$input_element.trigger('focus');
231 | // put text caret to end of search field
232 | if (self.$input_element[0].setSelectionRange) {
233 | self.$input_element[0].setSelectionRange(self.$input_element.val().length, self.$input_element.val().length);
234 | } else if (self.$input_element[0].createTextRange) {
235 | var range = self.$input_element[0].createTextRange();
236 | range.collapse(true);
237 | range.moveEnd('character', self.$input_element.val().length);
238 | range.moveStart('character', self.$input_element.val().length);
239 | range.select();
240 | }
241 | });
242 | self.$container_element.on('click', function () {
243 | self.$input_element.focus();
244 | self.$input_element.trigger('focus');
245 | });
246 | self.$container_element.on('dblclick', function () {
247 | self.$input_element.select();
248 | self.$input_element.trigger('focus');
249 | });
250 |
251 | // input element
252 | self.$input_element.on('keydown', function (_e) {
253 | var keyCode = _e.keyCode || _e.which;
254 | var $active = null;
255 | var $newActive = null;
256 | switch (keyCode) {
257 | case key.up:
258 | _e.preventDefault();
259 | showDropdown();
260 | $active = self.$options_element.find('.active');
261 | if ($active.length !== 0) {
262 | $newActive = $active.prevUntil('.' + self.options.prefix + 'option:visible').add($active).first().prev('.' + self.options.prefix + 'option:visible');
263 | $active.removeClass('active');
264 | $newActive.addClass('active');
265 | } else {
266 | self.$options_element.find('.' + self.options.prefix + 'option').filter(':visible').last().addClass('active');
267 | }
268 | scrollToActiveOption();
269 | break;
270 | case key.down:
271 | _e.preventDefault();
272 | showDropdown();
273 | $active = self.$options_element.find('.active');
274 | if ($active.length !== 0) {
275 | $newActive = $active.nextUntil('.' + self.options.prefix + 'option:visible').add($active).last().next('.' + self.options.prefix + 'option:visible');
276 | $active.removeClass('active');
277 | $newActive.addClass('active');
278 | } else {
279 | self.$options_element.find('.' + self.options.prefix + 'option').filter(':visible').first().addClass('active');
280 | }
281 | scrollToActiveOption();
282 | break;
283 | case key.escape:
284 | _e.preventDefault();
285 | break;
286 | case key.enter:
287 | _e.preventDefault();
288 | $active = self.$options_element.find('.active');
289 | if ($active.length !== 0) {
290 | selectOption();
291 | } else {
292 | if (self.$input_element.val() !== '') {
293 | self.options.submitCallback(self.$input_element.val());
294 | }
295 | }
296 | resizeSearchInput();
297 | break;
298 | case key.backspace:
299 | if (self.options.useSearch) {
300 | if (self.$input_element.val() === '' && is_multiple && self.$source_element.find('option:selected').length) {
301 | var lastSelectedItem = self.$source_element.find('option:selected').last()[0];
302 | lastSelectedItem.removeAttribute('selected');
303 | lastSelectedItem.selected = false;
304 | self.$source_element.trigger('change');
305 | renderSelectedItems();
306 | }
307 | resizeSearchInput();
308 | } else {
309 | _e.preventDefault();
310 | }
311 | break;
312 | default:
313 | resizeSearchInput();
314 | break;
315 | }
316 | });
317 | self.$input_element.on('keyup', function (_e) {
318 | _e.preventDefault();
319 | _e.stopPropagation();
320 | var keyCode = _e.which;
321 | switch (keyCode) {
322 | case key.escape:
323 | hideDropdown();
324 | break;
325 | case key.enter:
326 | if (!self.options.keepOpen) {
327 | hideDropdown();
328 | }
329 | break;
330 | case key.left:
331 | case key.right:
332 | case key.up:
333 | case key.down:
334 | case key.tab:
335 | case key.shift:
336 | // Prevent any action
337 | break;
338 | default:
339 | load();
340 | break;
341 | }
342 | if (self.$container_element.hasClass('options-hidden') && (keyCode === key.left || keyCode === key.right || keyCode === key.up || keyCode === key.down)) {
343 | showDropdown();
344 | }
345 | resizeSearchInput();
346 | });
347 | self.$input_element.on('focus', function () {
348 | self.$container_element.addClass('focused');
349 | if (is_single || self.options.showAllOptionsOnFocus || !self.options.useSearch) {
350 | if (!self.options.useSearch && using_remote_data) {
351 | load()
352 | }
353 | showDropdown();
354 | }
355 | });
356 | self.$input_element.on('blur', function () {
357 | self.$container_element.removeClass('focused');
358 | hideDropdown();
359 | });
360 |
361 | // bind selected item events
362 | self.$container_element.on('mousedown', '.' + self.options.prefix + 'selected_item_remove', function (e) {
363 | e.preventDefault();
364 | e.stopPropagation();
365 | self.removeSelection()
366 | });
367 |
368 | // bind option events
369 | self.$container_element.on('mouseover', '.' + self.options.prefix + 'option', function () {
370 | var $active = self.$options_element.find('.active');
371 | $active.removeClass('active');
372 | var $this = $(this);
373 | $this.addClass('active');
374 | });
375 | self.$container_element.on('mousedown', '.' + self.options.prefix + 'option', function (_e) {
376 | _e.preventDefault();
377 | _e.stopPropagation();
378 | });
379 | self.$container_element.on('mouseup', '.' + self.options.prefix + 'option', function () {
380 | selectOption();
381 | });
382 | self.$container_element.on('click', '.' + self.options.prefix + 'option', function (_e) {
383 | _e.stopPropagation();
384 | var $active = self.$options_element.find('.active');
385 | $active.removeClass('active');
386 | var $this = $(this);
387 | $this.addClass('active');
388 | });
389 |
390 | // Make elements accesible from options
391 | self.options.$source_element = self.$source_element;
392 | self.options.$container_element = self.$container_element;
393 | self.options.$selecteditems_element = self.$selecteditems_element;
394 | self.options.$input_element = self.$input_element;
395 | self.options.$textlength_element = self.$textlength_element;
396 | self.options.$options_element = self.$options_element;
397 |
398 | // Render
399 | renderOptions();
400 | renderSelectedItems();
401 | resizeSearchInput();
402 | };
403 |
404 |
405 | // RESIZE INPUT
406 | var resizeSearchInput = function () {
407 | if (is_multiple) {
408 | self.$textlength_element.text(self.$input_element.val() === '' && self.options.placeholder !== '' ? self.options.placeholder : self.$input_element.val());
409 | var width = self.$textlength_element.width() > (self.$container_element.width() - 30) ? (self.$container_element.width() - 30) : (self.$textlength_element.width() + 30);
410 | self.$input_element.css({ width: width + 'px' });
411 | }
412 | };
413 |
414 |
415 | // RENDER SELECTED ITEMS
416 | var renderSelectedItems = function () {
417 | self.$selecteditems_element.empty();
418 | self.$source_element.find('option').each(function () {
419 | var $option = $(this);
420 | if (this.selected) {
421 | var $item_element = $(document.createElement('div'));
422 | $item_element.data('source_item_element', this);
423 | $item_element.addClass(self.options.prefix + 'selected_item');
424 | $item_element.addClass(self.options.prefix + 'value_' + $option.val().replace(/\W/g, ''));
425 | if ($option.attr('class') !== undefined) {
426 | $item_element.addClass($option.attr('class'));
427 | }
428 |
429 | // fetch data
430 | var data = {
431 | value: this.value,
432 | text: this.text
433 | };
434 | $.each(this.attributes, function() {
435 | if(this.specified) {
436 | data[this.name.replace('data-', '')] = this.value;
437 | }
438 | });
439 | $.extend(data, $(this).data('item_data'));
440 | $item_element.append(self.options.render.selected_item(data, escape));
441 | if (is_single && (data[self.options.valueField] === '' || typeof data[self.options.valueField] === 'undefined' || self.$source_element.find('[value=""]').length === 0)) {
442 | $item_element.find('.' + self.options.prefix + 'selected_item_remove').remove();
443 | }
444 | self.$selecteditems_element.append($item_element);
445 | }
446 | });
447 | if (is_single) {
448 | if (self.options.placeholder !== '' && (self.$source_element.val() === '' || self.$source_element.val() === null)) {
449 | self.$selecteditems_element.empty();
450 | self.$selecteditems_element.append('' + self.options.placeholder + '
');
451 | } else {
452 | self.$selecteditems_element.find('.' + self.options.prefix + 'placeholder').remove();
453 | }
454 | }
455 | };
456 |
457 |
458 | // RENDER OPTIONS
459 | var renderOptions = function () {
460 | self.$options_element.empty();
461 | var optionsArray = [];
462 | self.$source_element.children().each(function () {
463 | if ($(this).prop('tagName').toLowerCase() === 'optgroup') {
464 | var $group = $(this);
465 | if ($group.children('option').length !== 0) {
466 | var groupOptionsArray = [];
467 | $group.children('option').each(function () {
468 | groupOptionsArray.push({
469 | type: 'option',
470 | text: $(this).html(),
471 | element: this
472 | });
473 | });
474 | optionsArray.push({
475 | type: 'group',
476 | text: $group.attr('label'),
477 | options: groupOptionsArray,
478 | element: $group
479 | });
480 | }
481 | } else {
482 | optionsArray.push({
483 | type: 'option',
484 | text: $(this).html(),
485 | element: this
486 | });
487 | }
488 | });
489 |
490 | $(optionsArray).each(function () {
491 | if (this.type === 'group') {
492 | var $group_element = $(document.createElement('li'));
493 | $group_element.addClass(self.options.prefix + 'group');
494 | if ($(this.element).attr('class') !== undefined) {
495 | $group_element.addClass($(this.element).attr('class'));
496 | }
497 | $group_element.html($(this.element).attr('label'));
498 | self.$options_element.append($group_element);
499 |
500 | $(this.options).each(function () {
501 | var option = createOption.call(this.element, true);
502 | self.$options_element.append(option);
503 | });
504 |
505 | } else {
506 | var option = createOption.call(this.element, false);
507 | self.$options_element.append(option);
508 | }
509 | });
510 | filterResults(self.usefilterResults);
511 | };
512 |
513 |
514 | // CREATE RESULT OPTION
515 | var createOption = function (_isGroupOption) {
516 | // holder li
517 | var $option = $(document.createElement('li'));
518 | $option.data('source_option_element', this);
519 | $option.attr('onclick', 'void(0)');
520 | $option.addClass(self.options.prefix + 'option');
521 | $option.addClass(self.options.prefix + 'value_' + $(this).val().replace(/\W/g, ''));
522 | if (_isGroupOption) {
523 | $option.addClass(self.options.prefix + 'group_option');
524 | }
525 | if (this.selected) {
526 | $option.addClass('active');
527 | }
528 | // class
529 | if ($(this).attr('class') !== undefined) {
530 | $option.addClass($(this).attr('class'));
531 | }
532 | // fetch data
533 | var data = {
534 | value: this.value,
535 | text : this.text
536 | };
537 | $.each(this.attributes, function() {
538 | if(this.specified) {
539 | data[this.name.replace('data-', '')] = this.value;
540 | }
541 | });
542 | $.extend(data, $(this).data('item_data'));
543 | if (is_multiple && this.selected) {
544 | $option.hide();
545 | }
546 |
547 | $option.append(self.options.render.option(data, escape));
548 |
549 | return $option;
550 | };
551 |
552 |
553 | // LOAD SEARCH RESULTS (IF NEEDED)
554 | var load = function () {
555 | clearTimeout(delayTimer);
556 | delayTimer = setTimeout(function () {
557 | self.$container_element.addClass('loading');
558 | if (using_remote_data) {
559 | self.options.load(self.$input_element.val(), function (results, usefilterResults) {
560 | self.usefilterResults = typeof usefilterResults !== 'undefined' ? usefilterResults : false;
561 | self.$source_element.children('option').not(':selected').not('[value=""]').remove();
562 | if (typeof results !== 'undefined') {
563 | var selectedOptions = [];
564 | $.each(self.$source_element.children('option:selected'), function (_key, _option) {
565 | selectedOptions.push(_option.value);
566 | });
567 | if (is_single && self.$source_element.find('[value=""]').length === 0) {
568 | self.$source_element.prepend($(' '));
569 | }
570 | if (self.$input_element.val().replace(/\s/g, '').length >= self.options.minSearchLength) {
571 | for (var i = 0; i < results.length; i++) {
572 | var result = results[i];
573 | if ($.inArray(result[self.options.valueField] + "", selectedOptions) === -1) {
574 | var $option = $('' + result[self.options.textField] + ' ');
575 | self.$source_element.append($option);
576 | $option.data('item_data', result);
577 | }
578 | }
579 | }
580 | }
581 | renderOptions();
582 | self.$container_element.removeClass('loading');
583 | filterResults(self.usefilterResults);
584 | });
585 | } else {
586 | self.$container_element.removeClass('loading');
587 | filterResults(self.usefilterResults);
588 | }
589 | }, self.options.delay);
590 | };
591 |
592 |
593 | // FILTER SEARCH RESULTS
594 | var filterResults = function (usefilterResults) {
595 | usefilterResults = typeof usefilterResults !== 'undefined' ? usefilterResults : false;
596 | // bool true if search field is below required length
597 | var searchIsBelowRequired = self.$input_element.val().replace(/\s/g, '').length < self.options.minSearchLength;
598 | // bool true if any options are visible
599 | has_visible_options = false;
600 | // get sanitized search text
601 | var searchFor = self.$input_element.val().toLowerCase();
602 | // iterate through the options
603 | self.$options_element.find('.' + self.options.prefix + 'option').each(function () {
604 | var $this = $(this);
605 | var source_option_element = $this.data('source_option_element');
606 | var $source_option_element = $(source_option_element);
607 |
608 | // SHOW IF:
609 | // --------------------------------------------
610 | // NOT using filter results
611 | // AND option is NOT selected
612 | // OR
613 | // using filter results
614 | // AND
615 | // option is NOT selected
616 | // OR single select
617 | // AND
618 | // use search
619 | // AND
620 | // searchtext is below required
621 | // OR option text matches searchtext
622 | // OR option value is empty
623 | // OR NOT using search
624 | var match_found = false;
625 | $.each(self.options.searchFields, function (key, value) {
626 | if (typeof $source_option_element.data(value) !== 'undefined' && $source_option_element.data(value).toString().toLowerCase().indexOf(searchFor) !== -1) {
627 | match_found = true;
628 | return false;
629 | }
630 | });
631 | if (
632 | (!usefilterResults
633 | && !source_option_element.selected
634 | )
635 | || (usefilterResults
636 | && (
637 | !source_option_element.selected
638 | || is_single
639 | )
640 | && (
641 | self.options.useSearch
642 | && (
643 | searchIsBelowRequired
644 | || match_found
645 | || $source_option_element.val() === ''
646 | )
647 | || !self.options.useSearch
648 | )
649 | )
650 | ) {
651 | $this.show();
652 | has_visible_options = !has_visible_options ? true : has_visible_options;
653 | } else {
654 | $this.hide();
655 | }
656 | });
657 | // iterate through the groups
658 | self.$options_element.find('.' + self.options.prefix + 'group').each(function () {
659 | var $this = $(this);
660 | var has_visible_options = false;
661 | $this.nextUntil('.' + self.options.prefix + 'group').each(function () {
662 | var $option = $(this);
663 | if ($option.css('display') !== 'none') {
664 | has_visible_options = true;
665 | return false;
666 | }
667 | });
668 | // show if the group has any visible children
669 | if (has_visible_options) {
670 | $this.show();
671 | } else {
672 | $this.hide();
673 | }
674 | });
675 | showDropdown();
676 | if (is_multiple) {
677 | self.$options_element.find('.active').removeClass('active');
678 | if (!searchIsBelowRequired) {
679 | self.$options_element.find('.' + self.options.prefix + 'option').filter(':visible').first().addClass('active');
680 | }
681 | }
682 | };
683 |
684 |
685 | // SHOW OPTIONS AND MASK
686 | var showDropdown = function () {
687 | if (self.$input_element.is(':focus') && (has_visible_options || is_single ) && !(self.$options_element.is(':empty') && !self.options.useSearch)) {
688 | self.$container_element.removeClass('options-hidden').addClass('options-visible');
689 | self.$mask_element.show();
690 | if (self.options.useDimmer) {
691 | self.$mask_element.addClass(self.options.prefix + 'mask_dimmed');
692 | } else {
693 | self.$mask_element.removeClass(self.options.prefix + 'mask_dimmed');
694 | }
695 | setTimeout(function () {
696 | self.$options_element.css('top', (self.$container_element.outerHeight() + (is_multiple ? 0 : self.$input_element.outerHeight()) - 1) + 'px');
697 | }, 1);
698 | scrollToActiveOption();
699 | } else {
700 | hideDropdown();
701 | }
702 | };
703 |
704 |
705 | // HIDE OPTIONS AND MASK
706 | var hideDropdown = function () {
707 | self.$container_element.removeClass('options-visible').addClass('options-hidden');
708 | self.$mask_element.removeClass(self.options.prefix + 'mask_dimmed');
709 | self.$mask_element.hide();
710 | };
711 |
712 |
713 | // SCROLL TO ACTIVE OPTION IN OPTIONS LIST
714 | var scrollToActiveOption = function () {
715 | var $active_element = self.$options_element.find('.' + self.options.prefix + 'option.active');
716 | if ($active_element.length > 0) {
717 | self.$options_element.scrollTop(self.$options_element.scrollTop() + $active_element.position().top - self.$options_element.height()/2 + $active_element.height()/2);
718 | }
719 | };
720 |
721 |
722 | // SELECT ACTIVE OPTION
723 | var selectOption = function () {
724 | // select option
725 | if (is_single) {
726 | var lastSelectedItem = self.$source_element.find('option:selected').last()[0];
727 | lastSelectedItem.removeAttribute('selected');
728 | lastSelectedItem.selected = false;
729 | }
730 | var $active = self.$options_element.find('.active');
731 | $active.data('source_option_element').setAttribute('selected', '');
732 | $active.data('source_option_element').selected = true;
733 | self.$source_element.trigger('change');
734 | if (!self.options.keepOpen) {
735 | self.$input_element.val('');
736 | }
737 | filterResults(self.usefilterResults);
738 | renderSelectedItems();
739 | resizeSearchInput();
740 | if (using_remote_data && !self.options.keepOpen) {
741 | self.$source_element.children('option').not(':selected').not('[value=""]').remove();
742 | renderOptions();
743 | hideDropdown();
744 | }
745 | if (!self.options.keepOpen) {
746 | hideDropdown();
747 | }
748 | };
749 |
750 |
751 | // ESCAPE FUNCTION
752 | var escape = function(str) {
753 | return (str + '')
754 | .replace(/&/g, '&')
755 | .replace(//g, '>')
757 | .replace(/"/g, '"');
758 | };
759 |
760 |
761 | // REFRESH PLUGIN
762 | self.refresh = function () {
763 | renderSelectedItems();
764 | };
765 |
766 |
767 | // REFRESH PLUGIN
768 | self.hideDropdown = function () {
769 | hideDropdown();
770 | };
771 |
772 |
773 | // REFRESH PLUGIN
774 | self.removeSelection = function () {
775 | var source_item_element = self.$container_element.find('.' + self.options.prefix + 'selected_item').data('source_item_element');
776 | source_item_element.removeAttribute('selected');
777 | source_item_element.selected = false;
778 | if (is_single && self.$source_element.find('[value=""]').length) {
779 | var noValueOption = self.$source_element.find('[value=""]')[0];
780 | noValueOption.setAttribute('selected', '');
781 | noValueOption.selected = true;
782 | }
783 | self.$source_element.trigger('change');
784 | filterResults(self.usefilterResults);
785 | renderOptions();
786 | renderSelectedItems();
787 | hideDropdown()
788 | };
789 |
790 |
791 | // REMOVE PLUGIN AND REVERT SELECT ELEMENT TO ORIGINAL STATE
792 | self.destroy = function () {
793 | self.$container_element.remove();
794 | $.removeData(_element, 'selectator');
795 | self.$source_element.show();
796 | if ($('.' + self.options.prefix + 'element').length === 0) {
797 | self.$mask_element.remove();
798 | }
799 | };
800 |
801 |
802 | // Initialize plugin
803 | self.init();
804 | };
805 |
806 | // Initializer
807 | $.fn.selectator = function(_options) {
808 | var options = _options !== undefined ? _options : {};
809 | return this.each(function () {
810 | var $this = $(this);
811 | if (typeof(options) === 'object') {
812 | if ($this.data('selectator') === undefined) {
813 | var self = new $.selectator(this, options);
814 | $this.data('selectator', self);
815 | }
816 | } else if ($this.data('selectator')[options]) {
817 | $this.data('selectator')[options].apply(this, Array.prototype.slice.call(arguments, 1));
818 | } else {
819 | $.error('Method ' + options + ' does not exist in $.selectator');
820 | }
821 | });
822 | };
823 | }(jQuery));
824 |
825 | // Markup initializer
826 | $(function () {
827 | 'use strict';
828 | $('.selectator').each(function () {
829 | var $this = $(this);
830 | var options = {};
831 | $.each($this.data(), function (_key, _value) {
832 | if (_key.substring(0, 10) === 'selectator') {
833 | options[_key.substring(10, 11).toLowerCase() + _key.substring(11)] = _value;
834 | }
835 | });
836 | $this.selectator(options);
837 | });
838 | });
839 |
--------------------------------------------------------------------------------
/fm.selectator.jquery.styl:
--------------------------------------------------------------------------------
1 | /**
2 | * Selectator jQuery Plugin
3 | * A plugin for select elements
4 | * version 3.2, Apr 9th, 2020
5 | * by Ingi á Steinamørk
6 | */
7 |
8 | /* mask */
9 | #selectator_mask
10 | background-color transparent
11 | width 100%
12 | height 100%
13 | left 0
14 | top 0
15 | bottom 0
16 | right 0
17 | position fixed
18 | z-index 100
19 |
20 | &.selectator_mask_dimmed
21 | background-color rgba(#000, .1)
22 |
23 | /* spinner keyframes */
24 | @keyframes selectator_spinner
25 | 0%
26 | transform rotate(0deg)
27 | 100%
28 | transform rotate(360deg)
29 |
30 | /* main element */
31 | .selectator_element
32 | border 1px solid #dcdcdc
33 | box-sizing border-box
34 | background-color #fff
35 | display inline-block
36 | text-decoration none
37 | vertical-align middle
38 | border-radius 2px
39 | *
40 | box-sizing border-box
41 | text-decoration none
42 | img
43 | display block
44 | &.multiple
45 | padding-right 20px !important
46 | padding-bottom 5px !important
47 | &.single
48 | height 36px
49 | padding 7px 10px !important
50 | &.focused
51 | box-shadow 0 0 1px #39f
52 | z-index 101
53 | &:after
54 | position absolute
55 | cursor pointer
56 | content '\25BC'
57 | font-size 70%
58 | transform scaleY(.75)
59 | right 4px
60 | color rgba(#000, .75)
61 | top 50%
62 | line-height 0
63 | &.loading:before
64 | border 3px solid rgba(#000, .1)
65 | border-top 3px solid rgba(#000, .5)
66 | border-radius 50%
67 | width 14px
68 | line-height 0
69 | height 14px
70 | margin-top -10px
71 | animation selectator_spinner 500ms linear infinite
72 | content: '';
73 | position: absolute;
74 | right: 20px;
75 | top 50%
76 |
77 |
78 | /* selected items */
79 | .selectator_selected_items
80 | .selectator_placeholder
81 | font-size 80%
82 | color rgba(#000, .5)
83 | .single &
84 | display block
85 | .multiple &
86 | display inline
87 | .selectator_selected_item
88 | color rgba(#000, .75)
89 | position relative
90 | vertical-align top
91 | .single &
92 | background-color transparent
93 | display block
94 | margin 0
95 | padding 0
96 | font-size inherit
97 | text-decoration none
98 | .multiple &
99 | background-color #fafafa
100 | display inline-block
101 | margin 5px 0 0 5px
102 | padding 3px 20px 2px 5px
103 | font-size 80%
104 | border-radius 2px
105 | border 1px solid #dcdcdc
106 | .selectator_selected_item_left
107 | float left
108 | .single &
109 | float left
110 | width 30px
111 | margin-top -2px
112 | img
113 | height 22px
114 | border-radius 2px
115 | .multiple &
116 | float left
117 | width 22px
118 | margin-top -1px
119 | margin-left -2px
120 | img
121 | height 18px
122 | border-radius 2px
123 | .selectator_selected_item_title
124 | .single &
125 | height auto
126 | line-height 1.3
127 | .multiple &
128 | float left
129 | padding-top 1px
130 | padding-bottom 1px
131 | .selectator_selected_item_subtitle
132 | display none
133 | .selectator_selected_item_right
134 | .single &
135 | float right
136 | background-color #aacc66
137 | color #fff
138 | font-weight bold
139 | font-size 80%
140 | text-align center
141 | line-height 16px
142 | border-radius 12px
143 | padding 2px 12px
144 | margin-right 40px
145 | .multiple &
146 | display none
147 | .selectator_selected_item_remove
148 | .single &
149 | display block
150 | position absolute
151 | right 16px
152 | cursor pointer
153 | font-size 75%
154 | font-weight bold
155 | color rgba(#000, .75)
156 | padding 2px
157 | line-height 0
158 | top 50%
159 | transform scaleX(1.2)
160 | .multiple &
161 | display inline-block
162 | font-weight bold
163 | color rgba(#000, .75)
164 | margin 0 0 0 5px
165 | cursor pointer
166 | font-size 60%
167 | line-height 10px
168 | vertical-align top
169 | border-radius 0 2px 2px 0
170 | position absolute
171 | right 0
172 | top 0
173 | bottom 0
174 | padding 7px 5px 4px 5px
175 | &:hover
176 | background-color rgba(#000, .1)
177 |
178 | /* input field */
179 | .selectator_input
180 | .selectator_textlength
181 | border 0
182 | display inline-block
183 | margin 0
184 | background-color transparent
185 | font-size 13px
186 | outline none
187 | .multiple &
188 | padding 3px 0 0 0
189 | margin 7px 0 2px 5px
190 | .selectator_input
191 | .single &
192 | border 1px solid #7f9db9
193 | position absolute
194 | bottom -40px
195 | left -1px
196 | z-index 101
197 | padding 10px 25px
198 | width 100%
199 | width calc(100% + 2px)
200 | border-bottom 0
201 | background-color #f6f6f6
202 | color #333
203 | font-size inherit
204 | box-shadow 0 8px 24px rgba(#000, .1)
205 | .single.options-hidden &
206 | opacity 0
207 | position absolute
208 | left -10000px
209 | .single.options-visible &
210 | opacity 1
211 | .disable_search &
212 | opacity 0
213 | padding 0 1px 1px 0 !important
214 |
215 | /* options */
216 | .selectator_options
217 | margin 0
218 | padding 0
219 | border 1px solid #7f9db9
220 | border-radius 0 0 3px 3px
221 | position absolute
222 | box-sizing border-box
223 | -moz-box-sizing border-box
224 | z-index 101
225 | background-color #fff
226 | overflow-y scroll
227 | max-height 250px
228 | list-style none
229 | left -1px
230 | right -1px
231 | box-shadow 0 8px 24px rgba(#000,.1)
232 | .disable_search &
233 | border-top 1px solid #7f9db9
234 | .single.disable_search &
235 | padding-top 0
236 | .options-hidden &
237 | display none
238 | .selectator_group
239 | padding 5px
240 | font-weight bold
241 | .selectator_option
242 | padding 5px
243 | cursor pointer
244 | color #000
245 | min-height 36px
246 | &.selectator_group_option
247 | padding-left 20px
248 | &:before
249 | &:after
250 | content ""
251 | display table
252 | &:after
253 | clear both
254 | .selectator_option_left
255 | float left
256 | & img
257 | height 30px
258 | border-radius 2px
259 | .selectator_option_title
260 | margin-left 40px
261 | .selectator_option_subtitle
262 | font-size 70%
263 | color rgba(#000, .5)
264 | margin-top -4px
265 | margin-bottom -1px
266 | margin-left 40px
267 | .selectator_option_right
268 | float right
269 | background-color #aacc66
270 | color #fff
271 | font-weight bold
272 | font-size 80%
273 | text-align center
274 | line-height 16px
275 | border-radius 12px
276 | padding 2px 12px
277 | margin-top 4px
278 | &.active
279 | background-color #39f
280 | color #fff
281 | .selectator_option_subtitle
282 | color rgba(#fff, .6)
283 |
--------------------------------------------------------------------------------
/images/ingi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/QODIO/selectator/4275f0d4fe01c6c5adc95210d137cd90252a0848/images/ingi.png
--------------------------------------------------------------------------------
/images/jogvan.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/QODIO/selectator/4275f0d4fe01c6c5adc95210d137cd90252a0848/images/jogvan.png
--------------------------------------------------------------------------------
/images/noimage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/QODIO/selectator/4275f0d4fe01c6c5adc95210d137cd90252a0848/images/noimage.png
--------------------------------------------------------------------------------
/images/runa.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/QODIO/selectator/4275f0d4fe01c6c5adc95210d137cd90252a0848/images/runa.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Selectator Plugin
5 |
6 |
7 |
8 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 | Selectator by Qodio
123 |
124 |
125 |
126 | Selectator is a jQuery-based replacement for select boxes. It supports searching, custom renderers, remote data (ajax) and affects the original select box directly, which is used as the data container.
127 |
128 |
129 |
130 |
131 |
132 |
193 |
194 |
195 |
259 |
260 |
261 |
262 |
291 |
292 |
293 |
354 |
355 |
356 |
357 |
405 |
406 |
407 |
469 |
470 |
471 |
472 |
519 |
520 |
521 |
582 |
583 |
584 |
585 |
633 |
634 |
635 |
698 |
699 |
700 |
701 |
702 | Inline markup initialized
703 |
704 |
705 | <select multiple class="selectator" data-selectator-keep-open="true" data-selectator-show-all-options-on-focus="true" data-selectator-search-fields="value text subtitle right">
706 |
707 |
708 |
709 | One
710 | Two
711 |
712 |
713 | Three
714 | Four
715 | Five
716 | Six
717 |
718 |
719 | Seven
720 |
721 | Eight
722 | Nine
723 | Ten
724 | Eleven
725 | Twelve
726 | Thirteen
727 | Fourteen
728 |
729 |
730 |
731 |
732 |
733 |
734 |
735 | Fork me on GitHub
736 |
741 |
742 |
743 |
--------------------------------------------------------------------------------
/jquery-3.4.1.min.js:
--------------------------------------------------------------------------------
1 | /*! jQuery v3.4.1 | (c) JS Foundation and other contributors | jquery.org/license */
2 | !function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],E=C.document,r=Object.getPrototypeOf,s=t.slice,g=t.concat,u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType},x=function(e){return null!=e&&e===e.window},c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.4.1",k=function(e,t){return new k.fn.init(e,t)},p=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;function d(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp($),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+$),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\([\\da-f]{1,6}"+M+"?|("+M+")|.)","ig"),ne=function(e,t,n){var r="0x"+t-65536;return r!=r||n?t:r<0?String.fromCharCode(r+65536):String.fromCharCode(r>>10|55296,1023&r|56320)},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(m.childNodes),m.childNodes),t[m.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&((e?e.ownerDocument||e:m)!==C&&T(e),e=e||C,E)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!A[t+" "]&&(!v||!v.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&U.test(t)){(s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=k),o=(l=h(t)).length;while(o--)l[o]="#"+s+" "+xe(l[o]);c=l.join(","),f=ee.test(t)&&ye(e.parentNode)||e}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){A(t,!0)}finally{s===k&&e.removeAttribute("id")}}}return g(t.replace(B,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[k]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e.namespaceURI,n=(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:m;return r!==C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),m!==C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=k,!C.getElementsByName||!C.getElementsByName(k).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){a.appendChild(e).innerHTML=" ",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+k+"-]").length||v.push("~="),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+k+"+*").length||v.push(".#.+[+~]")}),ce(function(e){e.innerHTML=" ";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",$)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),y=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},D=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)===(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e===C||e.ownerDocument===m&&y(m,e)?-1:t===C||t.ownerDocument===m&&y(m,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e===C?-1:t===C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]===m?-1:s[r]===m?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if((e.ownerDocument||e)!==C&&T(e),d.matchesSelector&&E&&!A[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){A(t,!0)}return 0":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=p[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&p(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function j(e,n,r){return m(n)?k.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?k.grep(e,function(e){return e===n!==r}):"string"!=typeof n?k.grep(e,function(e){return-1)[^>]*|#([\w-]+))$/;(k.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||q,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:L.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof k?t[0]:t,k.merge(this,k.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),D.test(r[1])&&k.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=E.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(k):k.makeArray(e,this)}).prototype=k.fn,q=k(E);var H=/^(?:parents|prev(?:Until|All))/,O={children:!0,contents:!0,next:!0,prev:!0};function P(e,t){while((e=e[t])&&1!==e.nodeType);return e}k.fn.extend({has:function(e){var t=k(e,this),n=t.length;return this.filter(function(){for(var e=0;e\x20\t\r\n\f]*)/i,he=/^$|^module$|\/(?:java|ecma)script/i,ge={option:[1,""," "],thead:[1,""],col:[2,""],tr:[2,""],td:[3,""],_default:[0,"",""]};function ve(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?k.merge([e],n):n}function ye(e,t){for(var n=0,r=e.length;nx",y.noCloneChecked=!!me.cloneNode(!0).lastChild.defaultValue;var Te=/^key/,Ce=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,Ee=/^([^.]*)(?:\.(.+)|)/;function ke(){return!0}function Se(){return!1}function Ne(e,t){return e===function(){try{return E.activeElement}catch(e){}}()==("focus"===t)}function Ae(e,t,n,r,i,o){var a,s;if("object"==typeof t){for(s in"string"!=typeof n&&(r=r||n,n=void 0),t)Ae(e,s,n,r,t[s],o);return e}if(null==r&&null==i?(i=n,r=n=void 0):null==i&&("string"==typeof n?(i=r,r=void 0):(i=r,r=n,n=void 0)),!1===i)i=Se;else if(!i)return e;return 1===o&&(a=i,(i=function(e){return k().off(e),a.apply(this,arguments)}).guid=a.guid||(a.guid=k.guid++)),e.each(function(){k.event.add(this,t,i,r,n)})}function De(e,i,o){o?(Q.set(e,i,!1),k.event.add(e,i,{namespace:!1,handler:function(e){var t,n,r=Q.get(this,i);if(1&e.isTrigger&&this[i]){if(r.length)(k.event.special[i]||{}).delegateType&&e.stopPropagation();else if(r=s.call(arguments),Q.set(this,i,r),t=o(this,i),this[i](),r!==(n=Q.get(this,i))||t?Q.set(this,i,!1):n={},r!==n)return e.stopImmediatePropagation(),e.preventDefault(),n.value}else r.length&&(Q.set(this,i,{value:k.event.trigger(k.extend(r[0],k.Event.prototype),r.slice(1),this)}),e.stopImmediatePropagation())}})):void 0===Q.get(e,i)&&k.event.add(e,i,ke)}k.event={global:{},add:function(t,e,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,v=Q.get(t);if(v){n.handler&&(n=(o=n).handler,i=o.selector),i&&k.find.matchesSelector(ie,i),n.guid||(n.guid=k.guid++),(u=v.events)||(u=v.events={}),(a=v.handle)||(a=v.handle=function(e){return"undefined"!=typeof k&&k.event.triggered!==e.type?k.event.dispatch.apply(t,arguments):void 0}),l=(e=(e||"").match(R)||[""]).length;while(l--)d=g=(s=Ee.exec(e[l])||[])[1],h=(s[2]||"").split(".").sort(),d&&(f=k.event.special[d]||{},d=(i?f.delegateType:f.bindType)||d,f=k.event.special[d]||{},c=k.extend({type:d,origType:g,data:r,handler:n,guid:n.guid,selector:i,needsContext:i&&k.expr.match.needsContext.test(i),namespace:h.join(".")},o),(p=u[d])||((p=u[d]=[]).delegateCount=0,f.setup&&!1!==f.setup.call(t,r,h,a)||t.addEventListener&&t.addEventListener(d,a)),f.add&&(f.add.call(t,c),c.handler.guid||(c.handler.guid=n.guid)),i?p.splice(p.delegateCount++,0,c):p.push(c),k.event.global[d]=!0)}},remove:function(e,t,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,v=Q.hasData(e)&&Q.get(e);if(v&&(u=v.events)){l=(t=(t||"").match(R)||[""]).length;while(l--)if(d=g=(s=Ee.exec(t[l])||[])[1],h=(s[2]||"").split(".").sort(),d){f=k.event.special[d]||{},p=u[d=(r?f.delegateType:f.bindType)||d]||[],s=s[2]&&new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),a=o=p.length;while(o--)c=p[o],!i&&g!==c.origType||n&&n.guid!==c.guid||s&&!s.test(c.namespace)||r&&r!==c.selector&&("**"!==r||!c.selector)||(p.splice(o,1),c.selector&&p.delegateCount--,f.remove&&f.remove.call(e,c));a&&!p.length&&(f.teardown&&!1!==f.teardown.call(e,h,v.handle)||k.removeEvent(e,d,v.handle),delete u[d])}else for(d in u)k.event.remove(e,d+t[l],n,r,!0);k.isEmptyObject(u)&&Q.remove(e,"handle events")}},dispatch:function(e){var t,n,r,i,o,a,s=k.event.fix(e),u=new Array(arguments.length),l=(Q.get(this,"events")||{})[s.type]||[],c=k.event.special[s.type]||{};for(u[0]=s,t=1;t\x20\t\r\n\f]*)[^>]*)\/>/gi,qe=/