Hello,
Is there a way to get the data item from the autocomplete list on a selection event? Right now from my research there is no onSelected event. There is one in the kendo jQuery implementation but nothing for a react implementation. Sure I could use the onChange event but this only fires when the value in the input box changes. There is no way I can identify that the user has selected the value from the list. I can make my own selection event but I would like to avoid this. Please let me know if there is something I am missing concerning this component. I tried using a combo box component as well, still was unable to find the selection event or an easier way to acquire a selected item.
Below is my current implementation, any assistance would be great. Thanks.
const mapStateToProps = (state: ApplicationState) => ({
...state.accountsStateSlice
});
type TypeAheadSearchProps = ReturnType<typeof mapStateToProps>
& {
data: Array<any>;
textField: string;
apiRequestThunk: (...params: any) => (dispatch: redux.Dispatch<redux.AnyAction>) => Promise<void>;
}
type AutoCompleteState = {
data?: Array<any>;
value?: string;
loading?: boolean;
}
const TypeAheadSearch = (props: TypeAheadSearchProps) => {
const [autoComplete, setAutoComplete] = useState<AutoCompleteState>({
data: props.data,
value: '',
loading: false
});
const onChange = (event: any) => {
const value = event.target.value;
if (value.length > 2) {
props.apiRequestThunk(value, true);
}
}
useEffect(() => {
setAutoComplete({
data: props.accounts,
loading: false,
})
}, [props.accounts])
return (
<AutoComplete
data={autoComplete.data}
value={autoComplete.value}
onChange={onChange}
loading={autoComplete.loading}
textField={props.textField}
/>
)
}
export default connect(mapStateToProps, null)(TypeAheadSearch);