@financial-times/o-autocomplete 2.0.0 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [2.2.0](https://github.com/Financial-Times/origami/compare/o-autocomplete-v2.1.0...o-autocomplete-v2.2.0) (2026-01-12)
+
+
+### Features
+
+* Add o-autocomplete showNoOptionsFound option ([a869a04](https://github.com/Financial-Times/origami/commit/a869a04ffc045d526bb1facf7c89215c4933754f))
+
+
+### Bug Fixes
+
+* Add o-autocomplete clear button post-click logic ([67f4fed](https://github.com/Financial-Times/origami/commit/67f4fed14380e8e7b12d3d36156604e0a51e6446))
+
+## [2.1.0](https://github.com/Financial-Times/origami/compare/o-autocomplete-v2.0.0...o-autocomplete-v2.1.0) (2025-11-13)
+
+
+### Features
+
+* Add o-autocomplete configurable highlighting ([b0b7d01](https://github.com/Financial-Times/origami/commit/b0b7d015ec9c2fe07c18ab57bddafb49468bc3c1))
+
 ## [2.0.0](https://github.com/Financial-Times/origami/compare/o-autocomplete-v1.10.0...o-autocomplete-v2.0.0) (2025-02-20)
 
 ### ⚠ BREAKING CHANGES

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@financial-times/o-autocomplete",
-	"version": "2.0.0",
+	"version": "2.2.0",
 	"description": "An origami component for autocomplete inputs",
 	"keywords": [
 		"autocomplete",

package/src/js/autocomplete.js

@@ -16,18 +16,19 @@ 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 text input field by the user
+ * @param {boolean} isHighlightCorrespondingToMatch - Boolean to determine whether matching or non-matching characters should be highlighted.
  * @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) {
+function highlightSuggestion(suggestion, query, isHighlightCorrespondingToMatch) {
 	const result = suggestion.split('');
 
 	const matchIndex = suggestion.toLocaleLowerCase().indexOf(query.toLocaleLowerCase());
 	return result.map(function(character, index) {
-		let shouldHighlight = true;
+		let shouldHighlight = !isHighlightCorrespondingToMatch;
 		const hasMatched = matchIndex > -1;
 		const characterIsWithinMatch = index >= matchIndex && index <= matchIndex + query.length - 1;
 		if (hasMatched && characterIsWithinMatch) {
-			shouldHighlight = false;
+			shouldHighlight = isHighlightCorrespondingToMatch;
 		}
 		return [character, shouldHighlight];
 	});
@@ -182,6 +183,7 @@ function initClearButton(instance) {
  * @property {MapOptionToSuggestedValue} [mapOptionToSuggestedValue] - Function which transforms a suggestion before rendering.
  * @property {onConfirm} [onConfirm] - Function which is called when the user selects an option
  * @property {SuggestionTemplate} [suggestionTemplate] - Function to override how a suggestion item is rendered.
+ * @property {boolean} [isHighlightCorrespondingToMatch] - Boolean to determine whether matching or non-matching characters should be highlighted.
  * @property {boolean} [autoselect] - Boolean to specify whether first option in suggestions list is highlighted.
  */
 
@@ -207,9 +209,11 @@ class Autocomplete {
 		if (opts.onConfirm) {
 			this.options.onConfirm = opts.onConfirm;
 		}
+		this.options.showNoOptionsFound = opts.showNoOptionsFound || false;
 		if (opts.suggestionTemplate) {
 			this.options.suggestionTemplate = opts.suggestionTemplate;
 		}
+		this.options.isHighlightCorrespondingToMatch = Boolean(opts.isHighlightCorrespondingToMatch);
 		if (opts.autoselect) {
 			this.options.autoselect = opts.autoselect;
 		}
@@ -244,7 +248,33 @@ class Autocomplete {
 			 * @returns {void}
 			 */
 			this.options.source = (query, populateOptions) => {
-				showLoadingPane(this);
+				// One way this function can be invoked is following a clearButton click event.
+
+				// The consumer-provided `customSource()` function can be wrapped in `debounce()`, creating the potential
+				// for a user-defined delay between the invocation of the `customSource()` and `callback()` functions.
+				// This delay could be longer than the 100ms frequency at which accessible-autocomplete polls the value of the input.
+
+				// The following code blocks accommodate the coincident of these circumstances.
+
+				// A clearButton click event will hide the loading pane and set the input value as an empty string.
+				if (query) {
+					// Therefore only show the loading pane if a `query` (i.e. input) value is present
+					// so as to avoid temporarily re-showing the loading pane prior to this function's callback hiding it once again.
+					showLoadingPane(this);
+				}
+
+				// A clearButton click event will blur the input field, resulting in the listbox of options becoming hidden
+				// (but without de-populating the options).
+				if (!query) {
+					// If the accessible-autocomplete poll occurs after a clearButton click event
+					// but before this function's callback is invoked then the listbox and its options will be re-displayed.
+					// When the callback eventually runs, it will de-populate the options, consequently re-hiding the listbox.
+					// To prevent this, in the event of no `query` value being present
+					// (where, logically, there will be no corresponding options),
+					// immediately de-populate the options rather than waiting for the callback to do so.
+					populateOptions([]);
+				}
+
 				/**
 				 * @param {Array<string>} options - The options which match the rext which was typed into the autocomplete by the user
 				 * @returns {void}
@@ -282,7 +312,7 @@ class Autocomplete {
 				cssNamespace: 'o-autocomplete',
 				displayMenu: 'overlay',
 				defaultValue: this.options.defaultValue || '',
-				showNoOptionsFound: false,
+				showNoOptionsFound: this.options.showNoOptionsFound,
 				autoselect: this.options.autoselect || false,
 				templates: {
 					/**
@@ -293,10 +323,17 @@ class Autocomplete {
 					 * @returns {string|undefined} HTML string to represent a single suggestion.
 					 */
 					suggestion: (option, query) => {
+						const isHighlightCorrespondingToMatch = this.options.isHighlightCorrespondingToMatch;
+
 						// If the suggestionTemplate override option is provided,
 						// use that to render the suggestion.
 						if(typeof this.options.suggestionTemplate === 'function') {
-							return this.options.suggestionTemplate(option, query);
+							return this.options.suggestionTemplate(
+								option,
+								query,
+								highlightSuggestion,
+								isHighlightCorrespondingToMatch
+							);
 						}
 						if (typeof option === 'object') {
 							// If the `mapOptionToSuggestedValue` function is defined
@@ -315,7 +352,7 @@ class Autocomplete {
 							throw new Error(`The option trying to be displayed as a suggestion is not a string, it is "${typeof option}". o-autocomplete can only display strings as suggestions. Define a \`mapOptionToSuggestedValue\` function to convert the option into a string to be used as the suggestion.`);
 						}
 
-						return this.suggestionTemplate(option);
+						return this.suggestionTemplate(option, isHighlightCorrespondingToMatch);
 					},
 					/**
 					 * Used when a suggestion is selected, the return value of this will be used as the value for the input element.
@@ -371,7 +408,7 @@ class Autocomplete {
 				placeholder: '',
 				cssNamespace: 'o-autocomplete',
 				displayMenu: 'overlay',
-				showNoOptionsFound: false,
+				showNoOptionsFound: this.options.showNoOptionsFound,
 				templates: {
 					suggestion: this.suggestionTemplate.bind(this)
 				}
@@ -387,15 +424,20 @@ class Autocomplete {
 	 * Used when rendering suggestions, the return value of this will be used as the innerHTML for a single suggestion.
 	 *
 	 * @param {string} suggestedValue The suggestion to apply the template with.
+	 * @param {boolean} isHighlightCorrespondingToMatch Boolean to determine whether matching or non-matching characters should be highlighted.
 	 * @returns {string} HTML string to be represent a single suggestion.
 	 */
-	suggestionTemplate (suggestedValue) {
+	suggestionTemplate (suggestedValue, isHighlightCorrespondingToMatch) {
 		// 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.
 		 */
-		const characters = highlightSuggestion(suggestedValue, input ? input.value : suggestedValue);
+		const characters = highlightSuggestion(
+			suggestedValue,
+			input ? input.value : suggestedValue,
+			isHighlightCorrespondingToMatch
+		);
 
 		let output = '';
 		for (const [character, shoudHighlight] of characters) {