├── .gitignore ├── LICENSE ├── README.md ├── fm.selectator.jquery.css ├── fm.selectator.jquery.js ├── fm.selectator.jquery.styl ├── images ├── ingi.png ├── jogvan.png ├── noimage.png └── runa.png ├── index.html └── jquery-3.4.1.min.js /.gitignore: -------------------------------------------------------------------------------- 1 | ################# 2 | ## PhpStorm 3 | ################# 4 | 5 | .idea 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013 Qodio 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | DEPRECATED - no longer actively maintained 2 | ========================================== 3 | 4 | Selectator 5 | ========== 6 | Selectator is a jQuery-based replacement for select boxes. It supports searching, custom renderers, remote data (ajax), search delay, minimum search length, selection remove/clear and placeholders. It affects the original select box directly, which is used as the data container. 7 | [You can see a demo here](http://opensource.qodio.com/selectator). 8 | 9 | 10 | Usage 11 | ----- 12 | ###### include in head: 13 | ```html 14 | 15 | 16 | 17 | ``` 18 | 19 | ###### to activate replacement: 20 | ```javascript 21 | $('#selectBox').selectator(); 22 | ``` 23 | If you don't wan't to meddle with scripting, there is an alternative to activate replacement, by using inline markup. 24 | ```html 25 | 92 | 93 | 94 | 95 | 96 | 97 | ``` 98 | It will be displayed something like this this: 99 | 100 | 101 | 104 | 107 | 110 | 111 | 112 | 115 | 116 |
102 | Left 103 | 105 | Title 106 | 108 | Right 109 |
113 | Subtitle 114 |
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 = $(''); 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 |
133 | 136 | 169 | 170 | 192 |
193 | 194 | 195 |
196 | 199 | 200 | 201 | 258 |
259 | 260 | 261 | 262 |
263 | 266 | 270 | 271 | 290 |
291 | 292 | 293 |
294 | 297 | 298 | 299 | 353 |
354 | 355 | 356 | 357 |
358 | 361 | 383 | 384 | 404 |
405 | 406 | 407 |
408 | 411 | 412 | 413 | 468 |
469 | 470 | 471 | 472 |
473 | 476 | 498 | 499 | 518 |
519 | 520 | 521 |
522 | 525 | 526 | 527 | 581 |
582 | 583 | 584 | 585 |
586 | 589 | 611 | 612 | 632 |
633 | 634 | 635 |
636 | 639 | 640 | 641 | 697 |
698 | 699 | 700 |
701 | 704 | 707 | 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=/\s*$/g;function Oe(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&k(e).children("tbody")[0]||e}function Pe(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function Re(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Me(e,t){var n,r,i,o,a,s,u,l;if(1===t.nodeType){if(Q.hasData(e)&&(o=Q.access(e),a=Q.set(t,o),l=o.events))for(i in delete a.handle,a.events={},l)for(n=0,r=l[i].length;n")},clone:function(e,t,n){var r,i,o,a,s,u,l,c=e.cloneNode(!0),f=oe(e);if(!(y.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||k.isXMLDoc(e)))for(a=ve(c),r=0,i=(o=ve(e)).length;r").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),E.head.appendChild(r[0])},abort:function(){i&&i()}}});var Vt,Gt=[],Yt=/(=)\?(?=&|$)|\?\?/;k.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=Gt.pop()||k.expando+"_"+kt++;return this[e]=!0,e}}),k.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Yt.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Yt.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Yt,"$1"+r):!1!==e.jsonp&&(e.url+=(St.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||k.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?k(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,Gt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),y.createHTMLDocument=((Vt=E.implementation.createHTMLDocument("").body).innerHTML="
",2===Vt.childNodes.length),k.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(y.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=D.exec(e))?[t.createElement(i[1])]:(i=we([e],t,o),o&&o.length&&k(o).remove(),k.merge([],i.childNodes)));var r,i,o},k.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(k.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},k.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){k.fn[t]=function(e){return this.on(t,e)}}),k.expr.pseudos.animated=function(t){return k.grep(k.timers,function(e){return t===e.elem}).length},k.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=k.css(e,"position"),c=k(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=k.css(e,"top"),u=k.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,k.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):c.css(f)}},k.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){k.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===k.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===k.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=k(e).offset()).top+=k.css(e,"borderTopWidth",!0),i.left+=k.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-k.css(r,"marginTop",!0),left:t.left-i.left-k.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===k.css(e,"position"))e=e.offsetParent;return e||ie})}}),k.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;k.fn[t]=function(e){return _(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),k.each(["top","left"],function(e,n){k.cssHooks[n]=ze(y.pixelPosition,function(e,t){if(t)return t=_e(e,n),$e.test(t)?k(e).position()[n]+"px":t})}),k.each({Height:"height",Width:"width"},function(a,s){k.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){k.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return _(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?k.css(e,t,i):k.style(e,t,n,i)},s,n?e:void 0,n)}})}),k.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){k.fn[n]=function(e,t){return 0