autosuggest-input-box

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