From 764b9a9db7f4e626f86fea3f2365daa3b3c1f728 Mon Sep 17 00:00:00 2001 From: Andy Gout Date: Wed, 27 Mar 2024 20:28:43 +0000 Subject: [PATCH] feat: Add query parameter to suggestionTemplate function --- components/o-autocomplete/README.md | 58 +- .../data.js | 2098 +++++++++++++++++ .../dynamic-custom-highlighted-suggestion.js | 127 + ...mic-custom-highlighted-suggestion.mustache | 14 + .../dynamic-custom-suggestion.js | 3 +- components/o-autocomplete/origami.json | 8 + .../o-autocomplete/src/js/autocomplete.js | 8 +- 7 files changed, 2311 insertions(+), 5 deletions(-) create mode 100644 components/o-autocomplete/demos/src/dynamic-custom-highlighted-suggestion/data.js create mode 100644 components/o-autocomplete/demos/src/dynamic-custom-highlighted-suggestion/dynamic-custom-highlighted-suggestion.js create mode 100644 components/o-autocomplete/demos/src/dynamic-custom-highlighted-suggestion/dynamic-custom-highlighted-suggestion.mustache diff --git a/components/o-autocomplete/README.md b/components/o-autocomplete/README.md index 781dcfe36c..55b9c7a3e9 100644 --- a/components/o-autocomplete/README.md +++ b/components/o-autocomplete/README.md @@ -236,6 +236,8 @@ This function is used to override the default rendering of suggestion items, wit It is typically used when wanting to provide additional context or styling for each suggestion item. +The `query` value (text which was typed into the autocomplete text input field by the user) is provided so that it can be used as a basis for highlighting the `option` value (or one of its values if it is an object). + :warning: **Caution:** because this function allows you to output arbitrary HTML, you should [make sure it's trusted](https://en.wikipedia.org/wiki/Cross-site_scripting), and accessible. The HTML will be output within listbox options, so [ensure all descendants are presentational](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/option_role#all_descendants_are_presentational). #### Example @@ -250,6 +252,7 @@ async function customSuggestions(query, populateOptions) { /** * @param {{"name": string, "role": string}} option - The option to transform into a suggestion + * @param {string} [query] - Text which was typed into the autocomplete text input field by the user * @returns {string} The HTML to render in the suggestion list*/ function suggestionTemplate(option) { return ` @@ -267,6 +270,58 @@ new oAutocomplete(oAutocompleteElement, { }); ``` +```js +import oAutocomplete from 'o-autocomplete'; + +async function customSuggestions(query, populateOptions) { + const suggestions = await getSuggestions(query); + populateOptions(suggestions); +} + +function highlightSuggestion(suggestion, query) { + const result = suggestion.split(''); + + const matchIndex = suggestion.toLocaleLowerCase().indexOf(query.toLocaleLowerCase()); + return result.map(function(character, index) { + let shouldHighlight = true; + const hasMatched = matchIndex > -1; + const characterIsWithinMatch = index >= matchIndex && index <= matchIndex + query.length - 1; + if (hasMatched && characterIsWithinMatch) { + shouldHighlight = false; + } + return [character, shouldHighlight]; + }); +} + +/** + * @param {{"name": string, "role": string}} option - The option to transform into a suggestion + * @param {string} [query] - Text which was typed into the autocomplete text input field by the user + * @returns {string} The HTML to render in the suggestion list*/ +function suggestionTemplate(option, query) { + const characters = highlightSuggestion(option.name, query || option.name); + + let output = ''; + for (const [character, shoudHighlight] of characters) { + if (shoudHighlight) { + output += `${character}`; + } else { + output += `${character}`; + } + } + output += ` (${option.role})`; + const span = document.createElement('span'); + span.setAttribute('aria-label', option.name); + span.innerHTML = output; + return span.outerHTML; +} + +const oAutocompleteElement = document.getElementById('my-o-autocomplete-element'); +new oAutocomplete(oAutocompleteElement, { + suggestionTemplate, + source: customSuggestions, +}); +``` + #### SuggestionTemplate ⇒ string @@ -274,7 +329,8 @@ new oAutocomplete(oAutocompleteElement, { | Param | Type | Description | | --- | --- | --- | -| option | \* | The option to transform into a suggestio | +| option | \* | The option to transform into a suggestion | +| query | string | Text which was typed into the autocomplete text input field by the user | ### onConfirm diff --git a/components/o-autocomplete/demos/src/dynamic-custom-highlighted-suggestion/data.js b/components/o-autocomplete/demos/src/dynamic-custom-highlighted-suggestion/data.js new file mode 100644 index 0000000000..6dc6aefc80 --- /dev/null +++ b/components/o-autocomplete/demos/src/dynamic-custom-highlighted-suggestion/data.js @@ -0,0 +1,2098 @@ +export const data = [ + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Afghanistan", + "Two_Letter_Country_Code": "AF", + "Three_Letter_Country_Code": "AFG", + "Country_Number": 4 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Albania", + "Two_Letter_Country_Code": "AL", + "Three_Letter_Country_Code": "ALB", + "Country_Number": 8 + }, + { + "Continent_Name": "Antarctica", + "Continent_Code": "AN", + "Country_Name": "Antarctica", + "Two_Letter_Country_Code": "AQ", + "Three_Letter_Country_Code": "ATA", + "Country_Number": 10 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Algeria", + "Two_Letter_Country_Code": "DZ", + "Three_Letter_Country_Code": "DZA", + "Country_Number": 12 + }, + { + "Continent_Name": "Oceania", + "Continent_Code": "OC", + "Country_Name": "American Samoa", + "Two_Letter_Country_Code": "AS", + "Three_Letter_Country_Code": "ASM", + "Country_Number": 16 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Andorra", + "Two_Letter_Country_Code": "AD", + "Three_Letter_Country_Code": "AND", + "Country_Number": 20 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Angola", + "Two_Letter_Country_Code": "AO", + "Three_Letter_Country_Code": "AGO", + "Country_Number": 24 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Antigua and Barbuda", + "Two_Letter_Country_Code": "AG", + "Three_Letter_Country_Code": "ATG", + "Country_Number": 28 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Azerbaijan", + "Two_Letter_Country_Code": "AZ", + "Three_Letter_Country_Code": "AZE", + "Country_Number": 31 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Azerbaijan", + "Two_Letter_Country_Code": "AZ", + "Three_Letter_Country_Code": "AZE", + "Country_Number": 31 + }, + { + "Continent_Name": "South America", + "Continent_Code": "SA", + "Country_Name": "Argentina", + "Two_Letter_Country_Code": "AR", + "Three_Letter_Country_Code": "ARG", + "Country_Number": 32 + }, + { + "Continent_Name": "Oceania", + "Continent_Code": "OC", + "Country_Name": "Australia", + "Two_Letter_Country_Code": "AU", + "Three_Letter_Country_Code": "AUS", + "Country_Number": 36 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Austria", + "Two_Letter_Country_Code": "AT", + "Three_Letter_Country_Code": "AUT", + "Country_Number": 40 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Bahamas", + "Two_Letter_Country_Code": "BS", + "Three_Letter_Country_Code": "BHS", + "Country_Number": 44 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Bahrain", + "Two_Letter_Country_Code": "BH", + "Three_Letter_Country_Code": "BHR", + "Country_Number": 48 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Bangladesh", + "Two_Letter_Country_Code": "BD", + "Three_Letter_Country_Code": "BGD", + "Country_Number": 50 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Armenia", + "Two_Letter_Country_Code": "AM", + "Three_Letter_Country_Code": "ARM", + "Country_Number": 51 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Armenia", + "Two_Letter_Country_Code": "AM", + "Three_Letter_Country_Code": "ARM", + "Country_Number": 51 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Barbados", + "Two_Letter_Country_Code": "BB", + "Three_Letter_Country_Code": "BRB", + "Country_Number": 52 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Belgium", + "Two_Letter_Country_Code": "BE", + "Three_Letter_Country_Code": "BEL", + "Country_Number": 56 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Bermuda", + "Two_Letter_Country_Code": "BM", + "Three_Letter_Country_Code": "BMU", + "Country_Number": 60 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Bhutan", + "Two_Letter_Country_Code": "BT", + "Three_Letter_Country_Code": "BTN", + "Country_Number": 64 + }, + { + "Continent_Name": "South America", + "Continent_Code": "SA", + "Country_Name": "Bolivia", + "Two_Letter_Country_Code": "BO", + "Three_Letter_Country_Code": "BOL", + "Country_Number": 68 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Bosnia and Herzegovina", + "Two_Letter_Country_Code": "BA", + "Three_Letter_Country_Code": "BIH", + "Country_Number": 70 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Botswana", + "Two_Letter_Country_Code": "BW", + "Three_Letter_Country_Code": "BWA", + "Country_Number": 72 + }, + { + "Continent_Name": "Antarctica", + "Continent_Code": "AN", + "Country_Name": "Bouvet Island", + "Two_Letter_Country_Code": "BV", + "Three_Letter_Country_Code": "BVT", + "Country_Number": 74 + }, + { + "Continent_Name": "South America", + "Continent_Code": "SA", + "Country_Name": "Brazil", + "Two_Letter_Country_Code": "BR", + "Three_Letter_Country_Code": "BRA", + "Country_Number": 76 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Belize", + "Two_Letter_Country_Code": "BZ", + "Three_Letter_Country_Code": "BLZ", + "Country_Number": 84 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "British Indian Ocean Territory", + "Two_Letter_Country_Code": "IO", + "Three_Letter_Country_Code": "IOT", + "Country_Number": 86 + }, + { + "Continent_Name": "Oceania", + "Continent_Code": "OC", + "Country_Name": "Solomon Islands", + "Two_Letter_Country_Code": "SB", + "Three_Letter_Country_Code": "SLB", + "Country_Number": 90 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "British Virgin Islands", + "Two_Letter_Country_Code": "VG", + "Three_Letter_Country_Code": "VGB", + "Country_Number": 92 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Brunei Darussalam", + "Two_Letter_Country_Code": "BN", + "Three_Letter_Country_Code": "BRN", + "Country_Number": 96 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Bulgaria", + "Two_Letter_Country_Code": "BG", + "Three_Letter_Country_Code": "BGR", + "Country_Number": 100 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Myanmar", + "Two_Letter_Country_Code": "MM", + "Three_Letter_Country_Code": "MMR", + "Country_Number": 104 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Burundi", + "Two_Letter_Country_Code": "BI", + "Three_Letter_Country_Code": "BDI", + "Country_Number": 108 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Belarus", + "Two_Letter_Country_Code": "BY", + "Three_Letter_Country_Code": "BLR", + "Country_Number": 112 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Cambodia", + "Two_Letter_Country_Code": "KH", + "Three_Letter_Country_Code": "KHM", + "Country_Number": 116 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Cameroon", + "Two_Letter_Country_Code": "CM", + "Three_Letter_Country_Code": "CMR", + "Country_Number": 120 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Canada", + "Two_Letter_Country_Code": "CA", + "Three_Letter_Country_Code": "CAN", + "Country_Number": 124 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Cape Verde", + "Two_Letter_Country_Code": "CV", + "Three_Letter_Country_Code": "CPV", + "Country_Number": 132 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Cayman Islands", + "Two_Letter_Country_Code": "KY", + "Three_Letter_Country_Code": "CYM", + "Country_Number": 136 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Central African Republic", + "Two_Letter_Country_Code": "CF", + "Three_Letter_Country_Code": "CAF", + "Country_Number": 140 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Sri Lanka", + "Two_Letter_Country_Code": "LK", + "Three_Letter_Country_Code": "LKA", + "Country_Number": 144 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Chad", + "Two_Letter_Country_Code": "TD", + "Three_Letter_Country_Code": "TCD", + "Country_Number": 148 + }, + { + "Continent_Name": "South America", + "Continent_Code": "SA", + "Country_Name": "Chile", + "Two_Letter_Country_Code": "CL", + "Three_Letter_Country_Code": "CHL", + "Country_Number": 152 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "China", + "Two_Letter_Country_Code": "CN", + "Three_Letter_Country_Code": "CHN", + "Country_Number": 156 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Taiwan", + "Two_Letter_Country_Code": "TW", + "Three_Letter_Country_Code": "TWN", + "Country_Number": 158 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Christmas Island", + "Two_Letter_Country_Code": "CX", + "Three_Letter_Country_Code": "CXR", + "Country_Number": 162 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Cocos (Keeling) Islands", + "Two_Letter_Country_Code": "CC", + "Three_Letter_Country_Code": "CCK", + "Country_Number": 166 + }, + { + "Continent_Name": "South America", + "Continent_Code": "SA", + "Country_Name": "Colombia", + "Two_Letter_Country_Code": "CO", + "Three_Letter_Country_Code": "COL", + "Country_Number": 170 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Comoros", + "Two_Letter_Country_Code": "KM", + "Three_Letter_Country_Code": "COM", + "Country_Number": 174 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Mayotte", + "Two_Letter_Country_Code": "YT", + "Three_Letter_Country_Code": "MYT", + "Country_Number": 175 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Congo", + "Two_Letter_Country_Code": "CG", + "Three_Letter_Country_Code": "COG", + "Country_Number": 178 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Congo", + "Two_Letter_Country_Code": "CD", + "Three_Letter_Country_Code": "COD", + "Country_Number": 180 + }, + { + "Continent_Name": "Oceania", + "Continent_Code": "OC", + "Country_Name": "Cook Islands", + "Two_Letter_Country_Code": "CK", + "Three_Letter_Country_Code": "COK", + "Country_Number": 184 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Costa Rica", + "Two_Letter_Country_Code": "CR", + "Three_Letter_Country_Code": "CRI", + "Country_Number": 188 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Croatia", + "Two_Letter_Country_Code": "HR", + "Three_Letter_Country_Code": "HRV", + "Country_Number": 191 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Cuba", + "Two_Letter_Country_Code": "CU", + "Three_Letter_Country_Code": "CUB", + "Country_Number": 192 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Cyprus", + "Two_Letter_Country_Code": "CY", + "Three_Letter_Country_Code": "CYP", + "Country_Number": 196 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Cyprus", + "Two_Letter_Country_Code": "CY", + "Three_Letter_Country_Code": "CYP", + "Country_Number": 196 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Czech Republic", + "Two_Letter_Country_Code": "CZ", + "Three_Letter_Country_Code": "CZE", + "Country_Number": 203 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Benin", + "Two_Letter_Country_Code": "BJ", + "Three_Letter_Country_Code": "BEN", + "Country_Number": 204 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Denmark", + "Two_Letter_Country_Code": "DK", + "Three_Letter_Country_Code": "DNK", + "Country_Number": 208 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Dominica", + "Two_Letter_Country_Code": "DM", + "Three_Letter_Country_Code": "DMA", + "Country_Number": 212 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Dominican Republic", + "Two_Letter_Country_Code": "DO", + "Three_Letter_Country_Code": "DOM", + "Country_Number": 214 + }, + { + "Continent_Name": "South America", + "Continent_Code": "SA", + "Country_Name": "Ecuador", + "Two_Letter_Country_Code": "EC", + "Three_Letter_Country_Code": "ECU", + "Country_Number": 218 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "El Salvador", + "Two_Letter_Country_Code": "SV", + "Three_Letter_Country_Code": "SLV", + "Country_Number": 222 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Equatorial Guinea", + "Two_Letter_Country_Code": "GQ", + "Three_Letter_Country_Code": "GNQ", + "Country_Number": 226 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Ethiopia", + "Two_Letter_Country_Code": "ET", + "Three_Letter_Country_Code": "ETH", + "Country_Number": 231 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Eritrea", + "Two_Letter_Country_Code": "ER", + "Three_Letter_Country_Code": "ERI", + "Country_Number": 232 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Estonia", + "Two_Letter_Country_Code": "EE", + "Three_Letter_Country_Code": "EST", + "Country_Number": 233 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Faroe Islands", + "Two_Letter_Country_Code": "FO", + "Three_Letter_Country_Code": "FRO", + "Country_Number": 234 + }, + { + "Continent_Name": "South America", + "Continent_Code": "SA", + "Country_Name": "Falkland Islands (Malvinas)", + "Two_Letter_Country_Code": "FK", + "Three_Letter_Country_Code": "FLK", + "Country_Number": 238 + }, + { + "Continent_Name": "Antarctica", + "Continent_Code": "AN", + "Country_Name": "South Georgia and the South Sandwich Islands", + "Two_Letter_Country_Code": "GS", + "Three_Letter_Country_Code": "SGS", + "Country_Number": 239 + }, + { + "Continent_Name": "Oceania", + "Continent_Code": "OC", + "Country_Name": "Fiji", + "Two_Letter_Country_Code": "FJ", + "Three_Letter_Country_Code": "FJI", + "Country_Number": 242 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Finland", + "Two_Letter_Country_Code": "FI", + "Three_Letter_Country_Code": "FIN", + "Country_Number": 246 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Ã…land Islands", + "Two_Letter_Country_Code": "AX", + "Three_Letter_Country_Code": "ALA", + "Country_Number": 248 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "France", + "Two_Letter_Country_Code": "FR", + "Three_Letter_Country_Code": "FRA", + "Country_Number": 250 + }, + { + "Continent_Name": "South America", + "Continent_Code": "SA", + "Country_Name": "French Guiana", + "Two_Letter_Country_Code": "GF", + "Three_Letter_Country_Code": "GUF", + "Country_Number": 254 + }, + { + "Continent_Name": "Oceania", + "Continent_Code": "OC", + "Country_Name": "French Polynesia", + "Two_Letter_Country_Code": "PF", + "Three_Letter_Country_Code": "PYF", + "Country_Number": 258 + }, + { + "Continent_Name": "Antarctica", + "Continent_Code": "AN", + "Country_Name": "French Southern Territories", + "Two_Letter_Country_Code": "TF", + "Three_Letter_Country_Code": "ATF", + "Country_Number": 260 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Djibouti", + "Two_Letter_Country_Code": "DJ", + "Three_Letter_Country_Code": "DJI", + "Country_Number": 262 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Gabon", + "Two_Letter_Country_Code": "GA", + "Three_Letter_Country_Code": "GAB", + "Country_Number": 266 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Georgia", + "Two_Letter_Country_Code": "GE", + "Three_Letter_Country_Code": "GEO", + "Country_Number": 268 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Georgia", + "Two_Letter_Country_Code": "GE", + "Three_Letter_Country_Code": "GEO", + "Country_Number": 268 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Gambia", + "Two_Letter_Country_Code": "GM", + "Three_Letter_Country_Code": "GMB", + "Country_Number": 270 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Palestinian Territory", + "Two_Letter_Country_Code": "PS", + "Three_Letter_Country_Code": "PSE", + "Country_Number": 275 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Germany", + "Two_Letter_Country_Code": "DE", + "Three_Letter_Country_Code": "DEU", + "Country_Number": 276 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Ghana", + "Two_Letter_Country_Code": "GH", + "Three_Letter_Country_Code": "GHA", + "Country_Number": 288 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Gibraltar", + "Two_Letter_Country_Code": "GI", + "Three_Letter_Country_Code": "GIB", + "Country_Number": 292 + }, + { + "Continent_Name": "Oceania", + "Continent_Code": "OC", + "Country_Name": "Kiribati", + "Two_Letter_Country_Code": "KI", + "Three_Letter_Country_Code": "KIR", + "Country_Number": 296 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Greece", + "Two_Letter_Country_Code": "GR", + "Three_Letter_Country_Code": "GRC", + "Country_Number": 300 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Greenland", + "Two_Letter_Country_Code": "GL", + "Three_Letter_Country_Code": "GRL", + "Country_Number": 304 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Grenada", + "Two_Letter_Country_Code": "GD", + "Three_Letter_Country_Code": "GRD", + "Country_Number": 308 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Guadeloupe", + "Two_Letter_Country_Code": "GP", + "Three_Letter_Country_Code": "GLP", + "Country_Number": 312 + }, + { + "Continent_Name": "Oceania", + "Continent_Code": "OC", + "Country_Name": "Guam", + "Two_Letter_Country_Code": "GU", + "Three_Letter_Country_Code": "GUM", + "Country_Number": 316 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Guatemala", + "Two_Letter_Country_Code": "GT", + "Three_Letter_Country_Code": "GTM", + "Country_Number": 320 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Guinea", + "Two_Letter_Country_Code": "GN", + "Three_Letter_Country_Code": "GIN", + "Country_Number": 324 + }, + { + "Continent_Name": "South America", + "Continent_Code": "SA", + "Country_Name": "Guyana", + "Two_Letter_Country_Code": "GY", + "Three_Letter_Country_Code": "GUY", + "Country_Number": 328 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Haiti", + "Two_Letter_Country_Code": "HT", + "Three_Letter_Country_Code": "HTI", + "Country_Number": 332 + }, + { + "Continent_Name": "Antarctica", + "Continent_Code": "AN", + "Country_Name": "Heard Island and McDonald Islands", + "Two_Letter_Country_Code": "HM", + "Three_Letter_Country_Code": "HMD", + "Country_Number": 334 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Holy See (Vatican City State)", + "Two_Letter_Country_Code": "VA", + "Three_Letter_Country_Code": "VAT", + "Country_Number": 336 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Honduras", + "Two_Letter_Country_Code": "HN", + "Three_Letter_Country_Code": "HND", + "Country_Number": 340 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Hong Kong", + "Two_Letter_Country_Code": "HK", + "Three_Letter_Country_Code": "HKG", + "Country_Number": 344 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Hungary", + "Two_Letter_Country_Code": "HU", + "Three_Letter_Country_Code": "HUN", + "Country_Number": 348 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Iceland", + "Two_Letter_Country_Code": "IS", + "Three_Letter_Country_Code": "ISL", + "Country_Number": 352 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "India", + "Two_Letter_Country_Code": "IN", + "Three_Letter_Country_Code": "IND", + "Country_Number": 356 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Indonesia", + "Two_Letter_Country_Code": "ID", + "Three_Letter_Country_Code": "IDN", + "Country_Number": 360 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Iran", + "Two_Letter_Country_Code": "IR", + "Three_Letter_Country_Code": "IRN", + "Country_Number": 364 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Iraq", + "Two_Letter_Country_Code": "IQ", + "Three_Letter_Country_Code": "IRQ", + "Country_Number": 368 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Ireland", + "Two_Letter_Country_Code": "IE", + "Three_Letter_Country_Code": "IRL", + "Country_Number": 372 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Israel", + "Two_Letter_Country_Code": "IL", + "Three_Letter_Country_Code": "ISR", + "Country_Number": 376 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Italy", + "Two_Letter_Country_Code": "IT", + "Three_Letter_Country_Code": "ITA", + "Country_Number": 380 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Cote d'Ivoire", + "Two_Letter_Country_Code": "CI", + "Three_Letter_Country_Code": "CIV", + "Country_Number": 384 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Jamaica", + "Two_Letter_Country_Code": "JM", + "Three_Letter_Country_Code": "JAM", + "Country_Number": 388 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Japan", + "Two_Letter_Country_Code": "JP", + "Three_Letter_Country_Code": "JPN", + "Country_Number": 392 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Kazakhstan", + "Two_Letter_Country_Code": "KZ", + "Three_Letter_Country_Code": "KAZ", + "Country_Number": 398 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Kazakhstan", + "Two_Letter_Country_Code": "KZ", + "Three_Letter_Country_Code": "KAZ", + "Country_Number": 398 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Jordan", + "Two_Letter_Country_Code": "JO", + "Three_Letter_Country_Code": "JOR", + "Country_Number": 400 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Kenya", + "Two_Letter_Country_Code": "KE", + "Three_Letter_Country_Code": "KEN", + "Country_Number": 404 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Korea", + "Two_Letter_Country_Code": "KP", + "Three_Letter_Country_Code": "PRK", + "Country_Number": 408 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Korea", + "Two_Letter_Country_Code": "KR", + "Three_Letter_Country_Code": "KOR", + "Country_Number": 410 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Kuwait", + "Two_Letter_Country_Code": "KW", + "Three_Letter_Country_Code": "KWT", + "Country_Number": 414 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Kyrgyz Republic", + "Two_Letter_Country_Code": "KG", + "Three_Letter_Country_Code": "KGZ", + "Country_Number": 417 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Lao People's Democratic Republic", + "Two_Letter_Country_Code": "LA", + "Three_Letter_Country_Code": "LAO", + "Country_Number": 418 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Lebanon", + "Two_Letter_Country_Code": "LB", + "Three_Letter_Country_Code": "LBN", + "Country_Number": 422 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Lesotho", + "Two_Letter_Country_Code": "LS", + "Three_Letter_Country_Code": "LSO", + "Country_Number": 426 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Latvia", + "Two_Letter_Country_Code": "LV", + "Three_Letter_Country_Code": "LVA", + "Country_Number": 428 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Liberia", + "Two_Letter_Country_Code": "LR", + "Three_Letter_Country_Code": "LBR", + "Country_Number": 430 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Libyan Arab Jamahiriya", + "Two_Letter_Country_Code": "LY", + "Three_Letter_Country_Code": "LBY", + "Country_Number": 434 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Liechtenstein", + "Two_Letter_Country_Code": "LI", + "Three_Letter_Country_Code": "LIE", + "Country_Number": 438 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Lithuania", + "Two_Letter_Country_Code": "LT", + "Three_Letter_Country_Code": "LTU", + "Country_Number": 440 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Luxembourg", + "Two_Letter_Country_Code": "LU", + "Three_Letter_Country_Code": "LUX", + "Country_Number": 442 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Macao", + "Two_Letter_Country_Code": "MO", + "Three_Letter_Country_Code": "MAC", + "Country_Number": 446 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Madagascar", + "Two_Letter_Country_Code": "MG", + "Three_Letter_Country_Code": "MDG", + "Country_Number": 450 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Malawi", + "Two_Letter_Country_Code": "MW", + "Three_Letter_Country_Code": "MWI", + "Country_Number": 454 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Malaysia", + "Two_Letter_Country_Code": "MY", + "Three_Letter_Country_Code": "MYS", + "Country_Number": 458 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Maldives", + "Two_Letter_Country_Code": "MV", + "Three_Letter_Country_Code": "MDV", + "Country_Number": 462 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Mali", + "Two_Letter_Country_Code": "ML", + "Three_Letter_Country_Code": "MLI", + "Country_Number": 466 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Malta", + "Two_Letter_Country_Code": "MT", + "Three_Letter_Country_Code": "MLT", + "Country_Number": 470 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Martinique", + "Two_Letter_Country_Code": "MQ", + "Three_Letter_Country_Code": "MTQ", + "Country_Number": 474 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Mauritania", + "Two_Letter_Country_Code": "MR", + "Three_Letter_Country_Code": "MRT", + "Country_Number": 478 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Mauritius", + "Two_Letter_Country_Code": "MU", + "Three_Letter_Country_Code": "MUS", + "Country_Number": 480 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Mexico", + "Two_Letter_Country_Code": "MX", + "Three_Letter_Country_Code": "MEX", + "Country_Number": 484 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Monaco", + "Two_Letter_Country_Code": "MC", + "Three_Letter_Country_Code": "MCO", + "Country_Number": 492 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Mongolia", + "Two_Letter_Country_Code": "MN", + "Three_Letter_Country_Code": "MNG", + "Country_Number": 496 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Moldova", + "Two_Letter_Country_Code": "MD", + "Three_Letter_Country_Code": "MDA", + "Country_Number": 498 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Montenegro", + "Two_Letter_Country_Code": "ME", + "Three_Letter_Country_Code": "MNE", + "Country_Number": 499 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Montserrat", + "Two_Letter_Country_Code": "MS", + "Three_Letter_Country_Code": "MSR", + "Country_Number": 500 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Morocco", + "Two_Letter_Country_Code": "MA", + "Three_Letter_Country_Code": "MAR", + "Country_Number": 504 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Mozambique", + "Two_Letter_Country_Code": "MZ", + "Three_Letter_Country_Code": "MOZ", + "Country_Number": 508 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Oman", + "Two_Letter_Country_Code": "OM", + "Three_Letter_Country_Code": "OMN", + "Country_Number": 512 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Namibia", + "Two_Letter_Country_Code": "NA", + "Three_Letter_Country_Code": "NAM", + "Country_Number": 516 + }, + { + "Continent_Name": "Oceania", + "Continent_Code": "OC", + "Country_Name": "Nauru", + "Two_Letter_Country_Code": "NR", + "Three_Letter_Country_Code": "NRU", + "Country_Number": 520 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Nepal", + "Two_Letter_Country_Code": "NP", + "Three_Letter_Country_Code": "NPL", + "Country_Number": 524 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Netherlands", + "Two_Letter_Country_Code": "NL", + "Three_Letter_Country_Code": "NLD", + "Country_Number": 528 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Netherlands Antilles", + "Two_Letter_Country_Code": "AN", + "Three_Letter_Country_Code": "ANT", + "Country_Number": 530 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Curaçao", + "Two_Letter_Country_Code": "CW", + "Three_Letter_Country_Code": "CUW", + "Country_Number": 531 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Aruba", + "Two_Letter_Country_Code": "AW", + "Three_Letter_Country_Code": "ABW", + "Country_Number": 533 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Sint Maarten (Netherlands)", + "Two_Letter_Country_Code": "SX", + "Three_Letter_Country_Code": "SXM", + "Country_Number": 534 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Bonaire", + "Two_Letter_Country_Code": "BQ", + "Three_Letter_Country_Code": "BES", + "Country_Number": 535 + }, + { + "Continent_Name": "Oceania", + "Continent_Code": "OC", + "Country_Name": "New Caledonia", + "Two_Letter_Country_Code": "NC", + "Three_Letter_Country_Code": "NCL", + "Country_Number": 540 + }, + { + "Continent_Name": "Oceania", + "Continent_Code": "OC", + "Country_Name": "Vanuatu", + "Two_Letter_Country_Code": "VU", + "Three_Letter_Country_Code": "VUT", + "Country_Number": 548 + }, + { + "Continent_Name": "Oceania", + "Continent_Code": "OC", + "Country_Name": "New Zealand", + "Two_Letter_Country_Code": "NZ", + "Three_Letter_Country_Code": "NZL", + "Country_Number": 554 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Nicaragua", + "Two_Letter_Country_Code": "NI", + "Three_Letter_Country_Code": "NIC", + "Country_Number": 558 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Niger", + "Two_Letter_Country_Code": "NE", + "Three_Letter_Country_Code": "NER", + "Country_Number": 562 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Nigeria", + "Two_Letter_Country_Code": "NG", + "Three_Letter_Country_Code": "NGA", + "Country_Number": 566 + }, + { + "Continent_Name": "Oceania", + "Continent_Code": "OC", + "Country_Name": "Niue", + "Two_Letter_Country_Code": "NU", + "Three_Letter_Country_Code": "NIU", + "Country_Number": 570 + }, + { + "Continent_Name": "Oceania", + "Continent_Code": "OC", + "Country_Name": "Norfolk Island", + "Two_Letter_Country_Code": "NF", + "Three_Letter_Country_Code": "NFK", + "Country_Number": 574 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Norway", + "Two_Letter_Country_Code": "NO", + "Three_Letter_Country_Code": "NOR", + "Country_Number": 578 + }, + { + "Continent_Name": "Oceania", + "Continent_Code": "OC", + "Country_Name": "Northern Mariana Islands", + "Two_Letter_Country_Code": "MP", + "Three_Letter_Country_Code": "MNP", + "Country_Number": 580 + }, + { + "Continent_Name": "Oceania", + "Continent_Code": "OC", + "Country_Name": "United States Minor Outlying Islands", + "Two_Letter_Country_Code": "UM", + "Three_Letter_Country_Code": "UMI", + "Country_Number": 581 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "United States Minor Outlying Islands", + "Two_Letter_Country_Code": "UM", + "Three_Letter_Country_Code": "UMI", + "Country_Number": 581 + }, + { + "Continent_Name": "Oceania", + "Continent_Code": "OC", + "Country_Name": "Micronesia", + "Two_Letter_Country_Code": "FM", + "Three_Letter_Country_Code": "FSM", + "Country_Number": 583 + }, + { + "Continent_Name": "Oceania", + "Continent_Code": "OC", + "Country_Name": "Marshall Islands", + "Two_Letter_Country_Code": "MH", + "Three_Letter_Country_Code": "MHL", + "Country_Number": 584 + }, + { + "Continent_Name": "Oceania", + "Continent_Code": "OC", + "Country_Name": "Palau", + "Two_Letter_Country_Code": "PW", + "Three_Letter_Country_Code": "PLW", + "Country_Number": 585 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Pakistan", + "Two_Letter_Country_Code": "PK", + "Three_Letter_Country_Code": "PAK", + "Country_Number": 586 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Panama", + "Two_Letter_Country_Code": "PA", + "Three_Letter_Country_Code": "PAN", + "Country_Number": 591 + }, + { + "Continent_Name": "Oceania", + "Continent_Code": "OC", + "Country_Name": "Papua New Guinea", + "Two_Letter_Country_Code": "PG", + "Three_Letter_Country_Code": "PNG", + "Country_Number": 598 + }, + { + "Continent_Name": "South America", + "Continent_Code": "SA", + "Country_Name": "Paraguay", + "Two_Letter_Country_Code": "PY", + "Three_Letter_Country_Code": "PRY", + "Country_Number": 600 + }, + { + "Continent_Name": "South America", + "Continent_Code": "SA", + "Country_Name": "Peru", + "Two_Letter_Country_Code": "PE", + "Three_Letter_Country_Code": "PER", + "Country_Number": 604 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Philippines", + "Two_Letter_Country_Code": "PH", + "Three_Letter_Country_Code": "PHL", + "Country_Number": 608 + }, + { + "Continent_Name": "Oceania", + "Continent_Code": "OC", + "Country_Name": "Pitcairn Islands", + "Two_Letter_Country_Code": "PN", + "Three_Letter_Country_Code": "PCN", + "Country_Number": 612 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Poland", + "Two_Letter_Country_Code": "PL", + "Three_Letter_Country_Code": "POL", + "Country_Number": 616 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Portugal", + "Two_Letter_Country_Code": "PT", + "Three_Letter_Country_Code": "PRT", + "Country_Number": 620 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Guinea-Bissau", + "Two_Letter_Country_Code": "GW", + "Three_Letter_Country_Code": "GNB", + "Country_Number": 624 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Timor-Leste", + "Two_Letter_Country_Code": "TL", + "Three_Letter_Country_Code": "TLS", + "Country_Number": 626 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Puerto Rico", + "Two_Letter_Country_Code": "PR", + "Three_Letter_Country_Code": "PRI", + "Country_Number": 630 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Qatar", + "Two_Letter_Country_Code": "QA", + "Three_Letter_Country_Code": "QAT", + "Country_Number": 634 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Reunion", + "Two_Letter_Country_Code": "RE", + "Three_Letter_Country_Code": "REU", + "Country_Number": 638 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Romania", + "Two_Letter_Country_Code": "RO", + "Three_Letter_Country_Code": "ROU", + "Country_Number": 642 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Russian Federation", + "Two_Letter_Country_Code": "RU", + "Three_Letter_Country_Code": "RUS", + "Country_Number": 643 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Russian Federation", + "Two_Letter_Country_Code": "RU", + "Three_Letter_Country_Code": "RUS", + "Country_Number": 643 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Rwanda", + "Two_Letter_Country_Code": "RW", + "Three_Letter_Country_Code": "RWA", + "Country_Number": 646 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Saint Barthelemy", + "Two_Letter_Country_Code": "BL", + "Three_Letter_Country_Code": "BLM", + "Country_Number": 652 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Saint Helena", + "Two_Letter_Country_Code": "SH", + "Three_Letter_Country_Code": "SHN", + "Country_Number": 654 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Saint Kitts and Nevis", + "Two_Letter_Country_Code": "KN", + "Three_Letter_Country_Code": "KNA", + "Country_Number": 659 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Anguilla", + "Two_Letter_Country_Code": "AI", + "Three_Letter_Country_Code": "AIA", + "Country_Number": 660 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Saint Lucia", + "Two_Letter_Country_Code": "LC", + "Three_Letter_Country_Code": "LCA", + "Country_Number": 662 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Saint Martin", + "Two_Letter_Country_Code": "MF", + "Three_Letter_Country_Code": "MAF", + "Country_Number": 663 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Saint Pierre and Miquelon", + "Two_Letter_Country_Code": "PM", + "Three_Letter_Country_Code": "SPM", + "Country_Number": 666 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Saint Vincent and the Grenadines", + "Two_Letter_Country_Code": "VC", + "Three_Letter_Country_Code": "VCT", + "Country_Number": 670 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "San Marino", + "Two_Letter_Country_Code": "SM", + "Three_Letter_Country_Code": "SMR", + "Country_Number": 674 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Sao Tome and Principe", + "Two_Letter_Country_Code": "ST", + "Three_Letter_Country_Code": "STP", + "Country_Number": 678 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Saudi Arabia", + "Two_Letter_Country_Code": "SA", + "Three_Letter_Country_Code": "SAU", + "Country_Number": 682 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Senegal", + "Two_Letter_Country_Code": "SN", + "Three_Letter_Country_Code": "SEN", + "Country_Number": 686 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Serbia", + "Two_Letter_Country_Code": "RS", + "Three_Letter_Country_Code": "SRB", + "Country_Number": 688 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Seychelles", + "Two_Letter_Country_Code": "SC", + "Three_Letter_Country_Code": "SYC", + "Country_Number": 690 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Sierra Leone", + "Two_Letter_Country_Code": "SL", + "Three_Letter_Country_Code": "SLE", + "Country_Number": 694 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Singapore", + "Two_Letter_Country_Code": "SG", + "Three_Letter_Country_Code": "SGP", + "Country_Number": 702 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Slovakia", + "Two_Letter_Country_Code": "SK", + "Three_Letter_Country_Code": "SVK", + "Country_Number": 703 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Vietnam", + "Two_Letter_Country_Code": "VN", + "Three_Letter_Country_Code": "VNM", + "Country_Number": 704 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Slovenia", + "Two_Letter_Country_Code": "SI", + "Three_Letter_Country_Code": "SVN", + "Country_Number": 705 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Somalia", + "Two_Letter_Country_Code": "SO", + "Three_Letter_Country_Code": "SOM", + "Country_Number": 706 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "South Africa", + "Two_Letter_Country_Code": "ZA", + "Three_Letter_Country_Code": "ZAF", + "Country_Number": 710 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Zimbabwe", + "Two_Letter_Country_Code": "ZW", + "Three_Letter_Country_Code": "ZWE", + "Country_Number": 716 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Spain", + "Two_Letter_Country_Code": "ES", + "Three_Letter_Country_Code": "ESP", + "Country_Number": 724 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "South Sudan", + "Two_Letter_Country_Code": "SS", + "Three_Letter_Country_Code": "SSD", + "Country_Number": 728 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Western Sahara", + "Two_Letter_Country_Code": "EH", + "Three_Letter_Country_Code": "ESH", + "Country_Number": 732 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Sudan", + "Two_Letter_Country_Code": "SD", + "Three_Letter_Country_Code": "SDN", + "Country_Number": 736 + }, + { + "Continent_Name": "South America", + "Continent_Code": "SA", + "Country_Name": "Suriname", + "Two_Letter_Country_Code": "SR", + "Three_Letter_Country_Code": "SUR", + "Country_Number": 740 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Svalbard & Jan Mayen Islands", + "Two_Letter_Country_Code": "SJ", + "Three_Letter_Country_Code": "SJM", + "Country_Number": 744 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Swaziland", + "Two_Letter_Country_Code": "SZ", + "Three_Letter_Country_Code": "SWZ", + "Country_Number": 748 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Sweden", + "Two_Letter_Country_Code": "SE", + "Three_Letter_Country_Code": "SWE", + "Country_Number": 752 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Switzerland", + "Two_Letter_Country_Code": "CH", + "Three_Letter_Country_Code": "CHE", + "Country_Number": 756 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Syrian Arab Republic", + "Two_Letter_Country_Code": "SY", + "Three_Letter_Country_Code": "SYR", + "Country_Number": 760 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Tajikistan", + "Two_Letter_Country_Code": "TJ", + "Three_Letter_Country_Code": "TJK", + "Country_Number": 762 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Thailand", + "Two_Letter_Country_Code": "TH", + "Three_Letter_Country_Code": "THA", + "Country_Number": 764 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Togo", + "Two_Letter_Country_Code": "TG", + "Three_Letter_Country_Code": "TGO", + "Country_Number": 768 + }, + { + "Continent_Name": "Oceania", + "Continent_Code": "OC", + "Country_Name": "Tokelau", + "Two_Letter_Country_Code": "TK", + "Three_Letter_Country_Code": "TKL", + "Country_Number": 772 + }, + { + "Continent_Name": "Oceania", + "Continent_Code": "OC", + "Country_Name": "Tonga", + "Two_Letter_Country_Code": "TO", + "Three_Letter_Country_Code": "TON", + "Country_Number": 776 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Trinidad and Tobago", + "Two_Letter_Country_Code": "TT", + "Three_Letter_Country_Code": "TTO", + "Country_Number": 780 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "United Arab Emirates", + "Two_Letter_Country_Code": "AE", + "Three_Letter_Country_Code": "ARE", + "Country_Number": 784 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Tunisia", + "Two_Letter_Country_Code": "TN", + "Three_Letter_Country_Code": "TUN", + "Country_Number": 788 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Turkey", + "Two_Letter_Country_Code": "TR", + "Three_Letter_Country_Code": "TUR", + "Country_Number": 792 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Turkey", + "Two_Letter_Country_Code": "TR", + "Three_Letter_Country_Code": "TUR", + "Country_Number": 792 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Turkmenistan", + "Two_Letter_Country_Code": "TM", + "Three_Letter_Country_Code": "TKM", + "Country_Number": 795 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "Turks and Caicos Islands", + "Two_Letter_Country_Code": "TC", + "Three_Letter_Country_Code": "TCA", + "Country_Number": 796 + }, + { + "Continent_Name": "Oceania", + "Continent_Code": "OC", + "Country_Name": "Tuvalu", + "Two_Letter_Country_Code": "TV", + "Three_Letter_Country_Code": "TUV", + "Country_Number": 798 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Uganda", + "Two_Letter_Country_Code": "UG", + "Three_Letter_Country_Code": "UGA", + "Country_Number": 800 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Ukraine", + "Two_Letter_Country_Code": "UA", + "Three_Letter_Country_Code": "UKR", + "Country_Number": 804 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Macedonia", + "Two_Letter_Country_Code": "MK", + "Three_Letter_Country_Code": "MKD", + "Country_Number": 807 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Egypt", + "Two_Letter_Country_Code": "EG", + "Three_Letter_Country_Code": "EGY", + "Country_Number": 818 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "United Kingdom of Great Britain & Northern Ireland", + "Two_Letter_Country_Code": "GB", + "Three_Letter_Country_Code": "GBR", + "Country_Number": 826 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Guernsey", + "Two_Letter_Country_Code": "GG", + "Three_Letter_Country_Code": "GGY", + "Country_Number": 831 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Jersey", + "Two_Letter_Country_Code": "JE", + "Three_Letter_Country_Code": "JEY", + "Country_Number": 832 + }, + { + "Continent_Name": "Europe", + "Continent_Code": "EU", + "Country_Name": "Isle of Man", + "Two_Letter_Country_Code": "IM", + "Three_Letter_Country_Code": "IMN", + "Country_Number": 833 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Tanzania", + "Two_Letter_Country_Code": "TZ", + "Three_Letter_Country_Code": "TZA", + "Country_Number": 834 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "United States of America", + "Two_Letter_Country_Code": "US", + "Three_Letter_Country_Code": "USA", + "Country_Number": 840 + }, + { + "Continent_Name": "North America", + "Continent_Code": "NA", + "Country_Name": "United States Virgin Islands", + "Two_Letter_Country_Code": "VI", + "Three_Letter_Country_Code": "VIR", + "Country_Number": 850 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Burkina Faso", + "Two_Letter_Country_Code": "BF", + "Three_Letter_Country_Code": "BFA", + "Country_Number": 854 + }, + { + "Continent_Name": "South America", + "Continent_Code": "SA", + "Country_Name": "Uruguay", + "Two_Letter_Country_Code": "UY", + "Three_Letter_Country_Code": "URY", + "Country_Number": 858 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Uzbekistan", + "Two_Letter_Country_Code": "UZ", + "Three_Letter_Country_Code": "UZB", + "Country_Number": 860 + }, + { + "Continent_Name": "South America", + "Continent_Code": "SA", + "Country_Name": "Venezuela", + "Two_Letter_Country_Code": "VE", + "Three_Letter_Country_Code": "VEN", + "Country_Number": 862 + }, + { + "Continent_Name": "Oceania", + "Continent_Code": "OC", + "Country_Name": "Wallis and Futuna", + "Two_Letter_Country_Code": "WF", + "Three_Letter_Country_Code": "WLF", + "Country_Number": 876 + }, + { + "Continent_Name": "Oceania", + "Continent_Code": "OC", + "Country_Name": "Samoa", + "Two_Letter_Country_Code": "WS", + "Three_Letter_Country_Code": "WSM", + "Country_Number": 882 + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Yemen", + "Two_Letter_Country_Code": "YE", + "Three_Letter_Country_Code": "YEM", + "Country_Number": 887 + }, + { + "Continent_Name": "Africa", + "Continent_Code": "AF", + "Country_Name": "Zambia", + "Two_Letter_Country_Code": "ZM", + "Three_Letter_Country_Code": "ZMB", + "Country_Number": 894 + }, + { + "Continent_Name": "Oceania", + "Continent_Code": "OC", + "Country_Name": "Disputed Territory", + "Two_Letter_Country_Code": "XX", + "Three_Letter_Country_Code": "", + "Country_Number": null + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Iraq-Saudi Arabia Neutral Zone", + "Two_Letter_Country_Code": "XE", + "Three_Letter_Country_Code": "", + "Country_Number": null + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "United Nations Neutral Zone", + "Two_Letter_Country_Code": "XD", + "Three_Letter_Country_Code": "", + "Country_Number": null + }, + { + "Continent_Name": "Asia", + "Continent_Code": "AS", + "Country_Name": "Spratly Islands", + "Two_Letter_Country_Code": "XS", + "Three_Letter_Country_Code": "", + "Country_Number": null + } +]; diff --git a/components/o-autocomplete/demos/src/dynamic-custom-highlighted-suggestion/dynamic-custom-highlighted-suggestion.js b/components/o-autocomplete/demos/src/dynamic-custom-highlighted-suggestion/dynamic-custom-highlighted-suggestion.js new file mode 100644 index 0000000000..b566a8086a --- /dev/null +++ b/components/o-autocomplete/demos/src/dynamic-custom-highlighted-suggestion/dynamic-custom-highlighted-suggestion.js @@ -0,0 +1,127 @@ +import Autocomplete from '../../../main.js'; +import {data} from './data.js'; +import oForms from '@financial-times/o-forms'; +oForms.init(); +/** + * @typedef {object} CustomOption + * @property {string} Continent_Code - 2 letter continent code + * @property {string} Continent_Name - name of continent + * @property {string} Country_Name - name of country + * @property {number} Country_Number - id of country + * @property {string} Three_Letter_Country_Code - three letter country code + * @property {string} Two_Letter_Country_Code - two letter country code + */ + +/** + * @param {CustomOption} option - The option to transform into a suggestion string + * @returns {string} The string to display in the suggestions dropdown for this option + */ +function mapOptionToSuggestedValue(option) { + if (typeof option !== 'object') { + throw new Error(`Could not map option to suggested value, unexpected type: ${typeof option}.`); + } + + if (typeof option.Country_Name !== 'string') { + throw new Error(`Could not map option to suggested value, option.Country_Name is not a string`); + } + + return option.Country_Name; +} + +/** + * @typedef CharacterHighlight - The character and whether it should be highlighted + * @type {Array} + * @property {string} 0 - the character in the suggestion + * @property {boolean} 1 - should it be highlighted? + */ + +/** + * @param {string} suggestion - Text which is going to be suggested to the user + * @param {string} query - Text which was typed into the autocomplete text input field by the user + * @returns {CharacterHighlight[]} An array of arrays which contain two items, the first is the character in the suggestion, the second is a boolean which indicates whether the character should be highlighted. + */ +function highlightSuggestion(suggestion, query) { + const result = suggestion.split(''); + + const matchIndex = suggestion.toLocaleLowerCase().indexOf(query.toLocaleLowerCase()); + return result.map(function(character, index) { + let shouldHighlight = true; + const hasMatched = matchIndex > -1; + const characterIsWithinMatch = index >= matchIndex && index <= matchIndex + query.length - 1; + if (hasMatched && characterIsWithinMatch) { + shouldHighlight = false; + } + return [character, shouldHighlight]; + }); +} + +/** + * @param {CustomOption} option - The option to transform into a suggestion string + * @param {string} [query] - Text which was typed into the autocomplete text input field by the user + * @returns {string} The string to display in the suggestions dropdown for this option + */ +function suggestionTemplate(option, query) { + if(typeof option === 'string') return option; + + /** + * @type {CharacterHighlight[]} An array of arrays which contain two items, the first is the character in the suggestion, the second is a boolean which indicates whether the character should be highlighted. + */ + const characters = highlightSuggestion(option.name, query || option.name); + + let output = ''; + for (const [character, shoudHighlight] of characters) { + if (shoudHighlight) { + output += `${character}`; + } else { + output += `${character}`; + } + } + output += ` (${option.Continent_Name})`; + + const span = document.createElement('span'); + span.setAttribute('aria-label', option.Country_Name); + span.innerHTML = output; + return span.outerHTML; +} + +/** + * @typedef {Function} PopulateOptions + * @property {Array} options - The options which match the rext which was typed into the autocomplete by the user + */ + +/** + * @param {string} query - Text which was typed into the autocomplete by the user + * @param {PopulateOptions} populateOptions - Function to call when ready to update the suggestions dropdown + * @returns {void} + */ +function customSuggestions(query, populateOptions) { + const suggestions = data; + + if (!query) { + populateOptions([]); + return; + } + suggestions.sort(function(a,b) { + return a.Country_Name.localeCompare(b.Country_Name); + }); + + const filteredOptions = []; + for (const suggestion of suggestions) { + const lowercaseSuggestion = suggestion.Country_Name.toLocaleLowerCase(); + if (lowercaseSuggestion.startsWith(query.toLocaleLowerCase())) { + filteredOptions.push(suggestion); + } + } + populateOptions(filteredOptions); +} + +new Autocomplete(document.querySelector('[data-o-component="o-autocomplete"]'), { + source: customSuggestions, + suggestionTemplate, + mapOptionToSuggestedValue, + defaultValue: data.find((d) => d['Two_Letter_Country_Code'] === 'GB')?.Country_Name, + onConfirm: function (option) { + // eslint-disable-next-line no-console + console.log('You chose option', option); + } +}); diff --git a/components/o-autocomplete/demos/src/dynamic-custom-highlighted-suggestion/dynamic-custom-highlighted-suggestion.mustache b/components/o-autocomplete/demos/src/dynamic-custom-highlighted-suggestion/dynamic-custom-highlighted-suggestion.mustache new file mode 100644 index 0000000000..293ee8ab89 --- /dev/null +++ b/components/o-autocomplete/demos/src/dynamic-custom-highlighted-suggestion/dynamic-custom-highlighted-suggestion.mustache @@ -0,0 +1,14 @@ +
+
+ + + + + + + + + Please fill out this field + +
+
diff --git a/components/o-autocomplete/demos/src/dynamic-custom-suggestion/dynamic-custom-suggestion.js b/components/o-autocomplete/demos/src/dynamic-custom-suggestion/dynamic-custom-suggestion.js index c0b384d3eb..3576896417 100644 --- a/components/o-autocomplete/demos/src/dynamic-custom-suggestion/dynamic-custom-suggestion.js +++ b/components/o-autocomplete/demos/src/dynamic-custom-suggestion/dynamic-custom-suggestion.js @@ -29,9 +29,10 @@ function mapOptionToSuggestedValue(option) { } /** * @param {CustomOption} option - The option to transform into a suggestion string + * @param {string} [query] - Text which was typed into the autocomplete text input field by the user * @returns {string} The string to display in the suggestions dropdown for this option */ -function suggestionTemplate(option) { +function suggestionTemplate(option, query) { //eslint-disable-line no-unused-vars if(typeof option === 'string') return option; return `
${option.Country_Name} diff --git a/components/o-autocomplete/origami.json b/components/o-autocomplete/origami.json index dd18fd1767..56d7cafe51 100644 --- a/components/o-autocomplete/origami.json +++ b/components/o-autocomplete/origami.json @@ -61,6 +61,14 @@ "js": "demos/src/dynamic-custom-suggestion/dynamic-custom-suggestion.js", "hidden": true }, + { + "title": "Autocomplete with custom highlighted suggestion items", + "name": "dynamic-custom-highlighted-suggestions", + "template": "demos/src/dynamic-custom-highlighted-suggestion/dynamic-custom-highlighted-suggestion.mustache", + "description": "The source function returns objects and the suggestionTemplate transforms the objects into custom highlighted HTML suggestions", + "js": "demos/src/dynamic-custom-highlighted-suggestion/dynamic-custom-highlighted-suggestion.js", + "hidden": true + }, { "title": "Pa11y", "name": "pa11y", diff --git a/components/o-autocomplete/src/js/autocomplete.js b/components/o-autocomplete/src/js/autocomplete.js index 66348a2a5e..710617c271 100644 --- a/components/o-autocomplete/src/js/autocomplete.js +++ b/components/o-autocomplete/src/js/autocomplete.js @@ -17,7 +17,7 @@ import accessibleAutocomplete from '@financial-times/accessible-autocomplete'; /** * @param {string} suggestion - Text which is going to be suggested to the user - * @param {string} query - Text which was typed into the autocomplete by the user + * @param {string} query - Text which was typed into the autocomplete text input field by the user * @returns {CharacterHighlight[]} An array of arrays which contain two items, the first is the character in the suggestion, the second is a boolean which indicates whether the character should be highlighted. */ function highlightSuggestion(suggestion, query) { @@ -291,13 +291,14 @@ class Autocomplete { * Used when rendering suggestions, the return value of this will be used as the innerHTML for a single suggestion. * * @param {*} option The suggestion to apply the template with. + * @param {string} query Text which was typed into the autocomplete text input field by the user. * @returns {string|undefined} HTML string to represent a single suggestion. */ - suggestion: (option) => { + suggestion: (option, query) => { // If the suggestionTemplate override option is provided, // use that to render the suggestion. if(typeof this.options.suggestionTemplate === 'function') { - return this.options.suggestionTemplate(option); + return this.options.suggestionTemplate(option, query); } if (typeof option === 'object') { // If the `mapOptionToSuggestedValue` function is defined @@ -393,6 +394,7 @@ class Autocomplete { suggestionTemplate (suggestedValue) { // o-autocomplete has a UI design to highlight characters in the suggestions. const input = this.autocompleteEl.querySelector('input'); + /** * @type {CharacterHighlight[]} An array of arrays which contain two items, the first is the character in the suggestion, the second is a boolean which indicates whether the character should be highlighted. */