Autocomplete

A simple autocomplete select component.

---

Usage

import { Autocomplete } from "@newfold/ui-component-library";

<Autocomplete
    id="autocomplete-input"
    onChange={handleChange}
    onQueryChange={handleQueryChange}
    placeholder="Type to autocomplete options"
    value=""
>
    <Autocomplete.Option value="1">
        Option 1
    </Autocomplete.Option>
    <Autocomplete.Option value="2">
        Option 2
    </Autocomplete.Option>
    <Autocomplete.Option value="3">
        Option 3
    </Autocomplete.Option>
</Autocomplete>

---

Label

An example with a label using label prop.

Select an Option

<Autocomplete
    id="autocomplete-input"
    onChange={handleChange}
    onQueryChange={handleQueryChange}
    placeholder="Type to autocomplete options"
    value=""
    label="Select an Option"
>
    <Autocomplete.Option value="1">
        Option 1
    </Autocomplete.Option>
    <Autocomplete.Option value="2">
        Option 2
    </Autocomplete.Option>
    <Autocomplete.Option value="3">
        Option 3
    </Autocomplete.Option>
</Autocomplete>

---

Placeholder

An example with placeholder using placeholder prop.

Select an Option

<Autocomplete
    id="autocomplete-input"
    onChange={handleChange}
    onQueryChange={handleQueryChange}
    value=""
    label="Select an Option"
    placeholder="A custom placeholder"
>
    <Autocomplete.Option value="1">
        Option 1
    </Autocomplete.Option>
    <Autocomplete.Option value="2">
        Option 2
    </Autocomplete.Option>
    <Autocomplete.Option value="3">
        Option 3
    </Autocomplete.Option>
</Autocomplete>

---

Selected Label

An example with default value using selectedLabel prop.

Select an Option

<Autocomplete
    id="autocomplete-input"
    onChange={handleChange}
    onQueryChange={handleQueryChange}
    value="2"
    label="Select an Option"
    placeholder="Type to autocomplete options"
    selectedLabel="Option 2"
>
    <Autocomplete.Option value="1">
        Option 1
    </Autocomplete.Option>
    <Autocomplete.Option value="2">
        Option 2
    </Autocomplete.Option>
    <Autocomplete.Option value="3">
        Option 3
    </Autocomplete.Option>
</Autocomplete>

---

Nullable

Allow empty values with reset button X or deleting the option and clicking outside the field.

Select an Option

<Autocomplete
    id="autocomplete-input"
    onChange={handleChange}
    onQueryChange={handleQueryChange}
    value=""
    label="Select an Option"
    placeholder="Type to autocomplete options"
    selectedLabel=""
>
    <Autocomplete.Option value="1">
        Option 1
    </Autocomplete.Option>
    <Autocomplete.Option value="2">
        Option 2
    </Autocomplete.Option>
    <Autocomplete.Option value="3">
        Option 3
    </Autocomplete.Option>
</Autocomplete>

---

onChange

The onChange prop is a function that will be called when the value of the Autocomplete component changes. The function will receive the new value of the Autocomplete component as a parameter.

<Autocomplete
    id="autocomplete-input"
    onChange={new_val => console.log(new_val)}
    onQueryChange={handleQueryChange}
>
    <Autocomplete.Option value="1">
        Option 1
    </Autocomplete.Option>
    <Autocomplete.Option value="2">
        Option 2
    </Autocomplete.Option>
    <Autocomplete.Option value="3">
        Option 3
    </Autocomplete.Option>
</Autocomplete>

---

onQueryChange

The onQueryChange prop is a function that will be called when the query of the Autocomplete component changes. The function will receive the new query event of the Autocomplete component as a parameter.

<Autocomplete
    id="autocomplete-input"
    onChange={(new_val) => console.log(new_val)}
    onQueryChange={(event) => console.log(event.target.value)}
>
    <Autocomplete.Option value="1">
        Option 1
    </Autocomplete.Option>
    <Autocomplete.Option value="2">
        Option 2
    </Autocomplete.Option>
    <Autocomplete.Option value="3">
        Option 3
    </Autocomplete.Option>
</Autocomplete>

---

Props

Attribute	Type	Description	Default
id*	string |	HTML id attribute.	-
value	string | number | bool |	-	-
placeholder	string |	-	-
children	node |	Pass `Autocomplete.Option` components as children	-
selectedLabel	string |	The label of the selected option.	-
label	string |	The label of the autocomplete input.	-
labelProps	object |	-	-
labelSuffix	node |	-	-
onChange*	function |	Callback function that is fired when an item has been selected.	-
onQueryChange*	function |	Callback function that is fired when the query changes.	-
className	string |	-	-
nullable	bool |	If true, the user can clear the selected value with `X` button.	-
buttonProps	object |	Props to be passed to the `X` button element.	-
clearButtonScreenReaderText	string |	Screen reader text for the clear button.	Clear