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 |