Get started with react-autosuggest CDN
MIT licensed
React-autosuggest is a popular React library for implementing flexible and customizable autocomplete/suggestion features.
Tags:- autosuggest
- autocomplete
- auto-suggest
- auto-complete
- auto suggest
- auto complete
- react autosuggest
- react autocomplete
- react auto-suggest
- react auto-complete
- react auto suggest
- react auto complete
- react-autosuggest
- react-autocomplete
- react-auto-suggest
- react-auto-complete
- react-component
Stable version
Copied!
How to start using react-autosuggest CDN
import React from 'react';
import Autosuggest from 'autosuggest'; // Import the Autosuggest component from the CDN
const suggestions = [
'Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape',
'Honeydew', 'Kiwi', 'Lemon', 'Mango', 'Nectarine', 'Orange', 'Peach',
'Quince', 'Raspberry', 'Strawberry', 'Tangerine', 'Ugli Fruit', 'Violet'
];
class FruitSuggestion extends React.Component {
render() {
const { fruit } = this.props;
return <div>{fruit}</div>;
}
}
class FruitInput extends React.Component {
state = {
value: '',
suggestions: [],
};
onChange = (event, { newValue }) => {
this.setState({ value: newValue });
};
onSuggestionsFetchRequested = ({ value }) => {
const inputValue = value.trim().toLowerCase();
const inputLength = inputValue.length;
this.setState({
suggestions: inputLength === 0 ? [] : suggestions.slice(0, 10).filter(
fruit => fruit.toLowerCase().slice(0, inputLength) === inputValue
),
});
};
onSuggestionsClearRequested = () => {
this.setState({ suggestions: [] });
};
renderSuggestion = suggestion => <FruitSuggestion fruit={suggestion} />;
renderSelection = selection => (
<FruitSuggestion fruit={selection.renderItem.props.fruit} />
);
render() {
const { value, suggestions } = this.state;
return (
<Autosuggest
suggestions={suggestions}
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
onSuggestionsClearRequested={this.onSuggestionsClearRequested}
getSuggestionValue={suggestion => suggestion.props.fruit}
onSuggestionSelected={this.handleSuggestionSelected}
inputValue={value}
renderSuggestion={this.renderSuggestion}
renderSelection={this.renderSelection}
inputProps={{
placeholder: 'Type a fruit',
value,
onChange: this.onChange,
}}
/>
);
}
}
export default FruitInput;
All versions
1.12.3
1.13.0
1.13.1
1.14.0
1.14.1
1.15.0
1.16.0
1.16.1
1.17.0
1.18.0
1.18.2
1.18.3
10.0.0
10.0.1
10.0.2
10.0.3
10.0.4
*** 10.1.0
2.0.0
2.1.0
2.1.1
2.2.0
2.2.1
2.2.2
2.2.3
2.2.4
2.2.5
3.0.0
3.0.0-alpha.1
3.0.0-alpha.2
3.0.0-alpha.3
3.0.0-alpha.4
3.0.0-alpha.5
3.0.0-alpha.6
3.0.0-beta.1
3.0.0-beta.2
3.0.0-beta.3
3.0.0-beta.4
3.1.0
3.2.0
3.3.0
3.3.1
3.3.2
3.3.3
3.3.4
3.3.5
3.4.0
3.5.0
3.5.1
3.6.0
3.7.0
3.7.1
3.7.2
3.7.3
3.7.4
3.8.0
3.9.0
4.0.0
5.0.0
5.0.1
5.0.2
5.1.0
5.1.1
5.1.2
6.0.0
6.0.1
6.0.2
6.0.3
6.0.4
6.1.0
7.0.0
7.0.1
7.0.2
7.1.0
8.0.0
8.0.1
9.0.0
9.0.1
9.1.0
9.2.0
9.3.0
9.3.1
9.3.2
9.3.3
9.3.4
9.4.0
9.4.1
9.4.2
9.4.3