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 |