Input Autocomplete

Tiny react input component with HTML5-like autocomplete.

Why not HTML5 autocomplete?

Because HTML5 autocomplete only show options based on earlier user typed values.

Features:

• Autocomplete based only on given values.
• No styling. Style it yourself as a regular text input element.
• Tiny abstraction over input element.
• Typescript types.

Demo and examples

Live demo: kevinjhanna.github.io/input-autocomplete

Installation

npm install input-autocomplete --save

Usage

Uncontrolled input

  import { InputAutocomplete } from 'input-autocomplete'
 
  <InputAutocomplete
    type='text'
    autocompleteValues={['john lennon', 'john travolta']}
  />

Controlled input

  import { InputAutocomplete } from 'input-autocomplete'
 
  let state = { 
    name: ''
  }
 
  const handleOnChange = (ev) => {
    state = {
      name: ev.currentTarget.value
    }
  }
 
  <InputAutocomplete
    type='text'
    autocompleteValues={['john lennon', 'john travolta']}
    value={state.name}
    onChange={handleOnChange}
  />