# spark-o-autocomplete

Spark-o-autcomplete is a React based version of the [o-autocomplete component](https://origami-registry.ft.com/components/o-autocomplete).

### 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](https://github.com/Financial-Times/origami/tree/main/components/o-autocomplete#for-a-dynamic-set-of-suggestions).

For more information about the o-autocomplete component, see the [Origami docs](https://github.com/Financial-Times/origami/tree/main/components/o-autocomplete).

## Props

| prop                      | type     | required | description                                                                                                          |
| ------------------------- | -------- | -------- | -------------------------------------------------------------------------------------------------------------------- |
| id                        | string   | yes      | Unique ID for the HTML element                                                                                       |
| source                    | function | yes      | see [o-autocomplete docs](https://registry.origami.ft.com/components/o-autocomplete@1.2.0/readme?brand=core#example) |
| mapOptionToSuggestedValue | function | no       | see [o-autocomplete docs](https://registry.origami.ft.com/components/o-autocomplete@1.2.0/readme?brand=core#example) |
| 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                                                                               |