Package Exports

autosuggest-input-box
autosuggest-input-box/dist/autosuggest-input-box.js

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

This is a simple, basic auto-suggest input box for React forms. To use it, simply pass in a list of suggestions and retrieve the selected value using a callback function. This component is compatible with TypeScript as well.

Please see the DEMO here

Install

npm

npm install --save autosuggest-input-box

yarn

yarn add autosuggest-input-box

Example

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"];

const App = () => {
  const onChange = (input) => {
    console.log(input);
  };
  return (
    <div>
      Country:
      <AutoSuggestInput list={suggestions} onChange={onChange} />
    </div>
  );
};

export default App;

API

Prop	Type	Required	Description
`list`	string[]	✓	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.
`id`	String		Element id to uniquely identify the input box in DOM
`name`	String		Element name to identify the element in form submissions
`placeholder`	String		Placeholder for the input box
`inputStyle`	CSSProperties		Input box react style object
`listStyle`	CSSProperties		List react style object
`itemStyle`	CSSProperties		Item react style object
`itemHoverStyle`	CSSProperties		Input hover react style object
`className`	String		Deprecated from v1.0.13