Package Exports
- autosuggest-input-box
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (autosuggest-input-box) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
A simple react auto suggest input box
A simple baisc auto suggest input box for react form, just pass the list of suggestions and get the selected value in react state for futher processing.
Install
npm
npm install --save autosuggest-input-box
yarn
yarn add autosuggest-input-box
Example
import { Component } from "react";
import AutoSuggestInput from "autosuggest-input-box";
const suggestions = ["China","India","United States","Indonesia","Pakistan","Brazil","Nigeria","Bangladesh","Russia","Mexico","Japan","Ethiopia","Philippines","gypt","Vietnam","DR Congo","Turkey","Iran","Germany","Thailand","United Kingdom","France","Italy","Tanzania","SouthAfrica","Myanmar","Kenya","South Korea","Colombia","Spain","Uganda","Argentina","Algeria","Sudan","Ukraine","Iraq","Afghanistan","Poland","Canada","Moocco","Saudi Arabia","Uzbekistan","Peru","Angola","Malaysia","Mozambique","Ghana","Yemen","Nepal","Venezuela"];
export class App extends Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
onSubmit(event) {
event.preventDefault();
alert("Value : " + this.state.value);
}
onChange(input) {
this.setState({value: input});
}
render() {
return (
<div>
<form onSubmit={this.onSubmit}>
Country:
<AutoSuggestInput list={suggestions} onChange={this.onChange} />
<input type="submit" value="Submit" />
</form>
</div>
);
}
}
export default App;
API
Prop | Type | Required | Description |
---|---|---|---|
list |
Array | ✓ | This contains list of values to be shown as suggestions |
onChange |
Function | ✓ | This function is used to capture the change in input box. It can be used to update the state in your file. |
className |
String | Pass your custom CSS class name(s) for the input box | |
id |
String | Element id to uniquely identify the input box in DOM | |
placeholder |
String | Placeholder for the input box |