@financial-times/o-autocomplete 1.9.1 → 1.10.0

package/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 += `<span class="o-autocomplete__option--highlight">${character}</span>`;
+		} else {
+			output += `${character}`;
+		}
+	}
+	output += ` <span>(${option.Continent_Name})</span>`;
+
+	const span = document.createElement('span');
+	span.setAttribute('aria-label', option.Country_Name);
+	span.innerHTML = output;
+	return span.outerHTML;
+}
+
+/**
+ * @typedef {Function} PopulateOptions
+ * @property {Array<string>} 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);
+	}
+});

package/demos/src/dynamic-custom-highlighted-suggestion/dynamic-custom-highlighted-suggestion.mustache

@@ -0,0 +1,14 @@
+<form data-o-component="o-forms">
+    <div class="o-forms-field">
+        <span class="o-forms-title">
+            <label for="my-autocomplete" class="o-forms-title__main">Select your country</label>
+        </span>
+        <span class="o-forms-input o-forms-input--text">
+            <span data-o-component="o-autocomplete" class="o-autocomplete">
+                <!-- If the JavaScript executes, then this input will be progressively enhanced to an autocomplete component -->
+                <input required type="text" name="text-example" id="my-autocomplete">
+            </span>
+            <span role="alert" class="o-forms-input__error">Please fill out this field</span>
+        </span>
+    </div>
+</form>

package/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 `<div>
 		<strong>${option.Country_Name}</strong>

package/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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/o-autocomplete",
-  "version": "1.9.1",
+  "version": "1.10.0",
   "description": "An origami component for autocomplete inputs",
   "keywords": [
     "autocomplete",
@@ -47,7 +47,7 @@
     "@financial-times/o-utils": "^2.1.0"
   },
   "dependencies": {
-    "@financial-times/accessible-autocomplete": "^2.1.2"
+    "@financial-times/accessible-autocomplete": "^3.1.0"
   },
   "private": false
 }

package/src/js/autocomplete.js

@@ -1,9 +1,7 @@
 // We use our own fork of accessible-autocomplete because the main package is not being actively maintained and has bugs which we needed to fix
 // There is a changelog for the fixes we've added -- https://github.com/Financial-Times/accessible-autocomplete/blob/master/CHANGELOG.md#210---2021-05-24
 // Below are the pull-requests to accessible-autocomplete which would fix the bugs:
-// https://github.com/alphagov/accessible-autocomplete/pull/497
 // https://github.com/alphagov/accessible-autocomplete/pull/491
-// https://github.com/alphagov/accessible-autocomplete/pull/496
 // If the above pull-requests are merged and published, then we can stop using our fork
 import accessibleAutocomplete from '@financial-times/accessible-autocomplete';
 
@@ -17,7 +15,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 +289,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