JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 6
  • Score
    100M100P100Q26077F
  • License MIT

A simple react autosuggestion input field

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