A simple react component that displays a list of values, of which you can filter via an input and select by clicking the value or pressing enter to choose the first displayed value.
npm install autocomplete-react-component@latest
import React from 'react';
import Autocomplete from 'autocomplete-react-component';
export default class UsingAutoComplete extends React.Component {
constructor(props) {
super(props);
this.state = {
languagesArray: ['JavaScript', 'Java', 'Python'],
};
}
selectedLanguageHandler = clickedValue => {
console.log(clickedValue);
// JavaScript
// Example Output, if clicked Language: JavaScript
};
render() {
return (
<AutoComplete
style={{ color: 'grey' }}
dropdownStyle={{ backgroundColor: 'grey' }}
valuesStyle={{ color: 'pink' }}
values={this.state.languagesArray}
onClick={this.selectedLanguageHandler}
/>
);
}
}
- An array of values that will be displayed
- Returns the value of the item clicked, i.e the array Item clicked has a value of "JSON". onClick(value){} value will be equal to "JSON"
- Styles the individual li elements in the dropdown display
- Styles the dropdown display element
- Styles the Containing Element of the Rendered AutoComplete Component