spark-o-autocomplete

Spark-o-autcomplete is a React based version of the o-autocomplete component.

How to use

To install via npm, run:

npm i @financial-times/spark-o-autocomplete

Example usage:

import Autocomplete from '@financial-times/spark-o-autocomplete';

async function fetchSuggestions(query, populateSuggestions) {
	const results = await fetch(LOOKUP_API); // API call to look up suggestions for query
	populateSuggestions(results);
}

function mapOptionToSuggestedValue(option) {
	// used to convert object to string to display
}

<Autocomplete
	id="spark-admin-user-lookup"
	source={fetchSuggestions}
	mapOptionToSuggestedValue={mapOptionToSuggestedValue}
	onConfirm={onConfirm}
	defaultValue={selectedUser._id}
/>

The <Autocomplete> react component is designed to work with dynamic suggestions.

For more information about the o-autocomplete component, see the Origami docs.

Props

prop	type	required	description
id	string	yes	Unique ID for the HTML element
source	function	yes	see o-autocomplete docs
mapOptionToSuggestedValue	function	no	see o-autocomplete docs
onConfirm	function	no	function that is called when a suggestion is selected. Takes a single argument of the selected option.
defaultValue	string	no	value to show when the component loads