1/*========================================================================================= 2 File Name: form-selectivity.js 3 Description: Selectivity js for select field 4 ---------------------------------------------------------------------------------------- 5 Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template 6 Version: 1.0 7 Author: PIXINVENT 8 Author URL: http://www.themeforest.net/user/pixinvent 9==========================================================================================*/ 10(function(window, document, $) { 11 'use strict'; 12 13 /* global $ */ 14 15 function escape(string) { 16 return string ? String(string).replace(/[&<>"']/g, function(match) { 17 return { 18 '&': '&', 19 '<': '<', 20 '>': '>', 21 '"': '"', 22 '\'': ''' 23 }[match]; 24 }) : ''; 25 } 26 27 28 // Get all the cities from single-select-box 29 var cities = $('#single-select-box').find('option').map(function() { 30 return this.textContent; 31 }).get(); 32 33 // Get all the countries by cities from multiple-select-box -> optgroup 34 var citiesByCountry = $('#multiple-select-box').find('optgroup').map(function() { 35 return { 36 text: this.getAttribute('label'), 37 children: $(this).find('option').map(function() { 38 return { 39 id: parseInt(this.getAttribute('value'), 10), 40 text: this.textContent 41 }; 42 }).get() 43 }; 44 }).get(); 45 46 // Get Timezones of all cities from multiple-select-box -> option 47 var citiesWithTimezone = $('#multiple-select-box').find('option').map(function() { 48 return { 49 id: this.textContent, 50 timezone: this.getAttribute('data-timezone') 51 }; 52 }).get(); 53 54 var transformText = $.fn.selectivity.transformText; 55 56 // example query function that returns at most 10 cities matching the given text 57 function queryFunction(query) { 58 var selectivity = query.selectivity; 59 var term = query.term; 60 var offset = query.offset || 0; 61 var results; 62 if (selectivity.$el.attr('id') === 'single-input-with-submenus') { 63 if (selectivity.dropdown) { 64 var timezone = selectivity.dropdown.highlightedResult.id; 65 results = citiesWithTimezone.filter(function(city) { 66 return transformText(city.id).indexOf(transformText(term)) > -1 && 67 city.timezone === timezone; 68 }).map(function(city) { return city.id; }); 69 } else { 70 query.callback({ more: false, results: [] }); 71 return; 72 } 73 } else { 74 results = cities.filter(function(city) { 75 return transformText(city).indexOf(transformText(term)) > -1; 76 }); 77 } 78 results.sort(function(a, b) { 79 a = transformText(a); 80 b = transformText(b); 81 var startA = (a.slice(0, term.length) === term), 82 startB = (b.slice(0, term.length) === term); 83 if (startA) { 84 return (startB ? (a > b ? 1 : -1) : -1); 85 } else { 86 return (startB ? 1 : (a > b ? 1 : -1)); 87 } 88 }); 89 setTimeout(function() { 90 query.callback({ 91 more: results.length > offset + 10, 92 results: results.slice(offset, offset + 10) 93 }); 94 }, 500); 95 } 96 97 // default select 98 $('.single-input').selectivity({ 99 allowClear: true, 100 placeholder: 'No city selected', 101 query: queryFunction, 102 searchInputPlaceholder: 'Type to search a city' 103 }); 104 105 // without-search 106 $('.single-input-without-search').selectivity({ 107 allowClear: true, 108 items: cities, 109 placeholder: 'No city selected', 110 }); 111 112 // With Labels 113 $('.single-input-with-labels').selectivity({ 114 allowClear: true, 115 items: citiesByCountry, 116 placeholder: 'No city selected', 117 searchInputPlaceholder: 'Type to search a city' 118 }); 119 120 // With Submenus 121 var submenu = { 122 query: queryFunction, 123 showSearchInput: true 124 }; 125 126 $('.single-input-with-submenus').selectivity({ 127 allowClear: true, 128 items: [ 129 { text: 'Western European Time Zone', id: '+00:00', submenu: submenu }, 130 { text: 'Central European Time Zone', id: '+01:00', submenu: submenu }, 131 { text: 'Eastern European Time Zone', id: '+02:00', submenu: submenu } 132 ], 133 placeholder: 'No city selected', 134 showSearchInputInDropdown: false 135 }); 136 137 // Select more than one options 138 $('.multiple-input').selectivity({ 139 multiple: true, 140 placeholder: 'Type to search cities', 141 query: queryFunction 142 }); 143 144 // Select tags from given options 145 $('.tags-input').selectivity({ 146 items: ['red', 'green', 'blue'], 147 multiple: true, 148 tokenSeparators: [' '], 149 value: ['brown', 'red', 'green'] 150 }); 151 152 // Set email addresses as multi options 153 $('.emails-input').selectivity({ 154 inputType: 'Email', 155 placeholder: 'Type or paste email addresses' 156 }); 157 158 // Select box single 159 $('.single-select-box').selectivity(); 160 161 // Without searchbox 162 $('.without-search-box').selectivity({ 163 showSearchInputInDropdown: false 164 }); 165 166 // Multiple Select Box 167 $('.multiple-select-box').selectivity(); 168 169 $('.repository-input').selectivity({ 170 ajax: { 171 url: 'https://api.github.com/search/repositories', 172 dataType: 'json', 173 minimumInputLength: 3, 174 quietMillis: 250, 175 params: function(term, offset) { 176 // GitHub uses 1-based pages with 30 results, by default 177 var page = 1 + Math.floor(offset / 30); 178 179 return { q: term, page: page }; 180 }, 181 processItem: function(item) { 182 return { 183 id: item.id, 184 text: item.name, 185 description: item.description 186 }; 187 }, 188 results: function(data, offset) { 189 return { 190 results: data.items, 191 more: (data.total_count > offset + data.items.length) 192 }; 193 } 194 }, 195 placeholder: 'Search for a repository', 196 templates: { 197 resultItem: function(item) { 198 return ( 199 '<div class="selectivity-result-item" data-item-id="' + item.id + '">' + 200 '<b>' + escape(item.text) + '</b><br>' + 201 escape(item.description) + 202 '</div>' 203 ); 204 } 205 } 206 }); 207})(window, document, jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.