react-easy-auto-complete-input

Easy to create an input with suggest list. Can use on input text or textarea. Trigger showing suggest list by special character such as: @, [, ... anything you like

Features:

• Support typescript
• All style can be customed via children, className, style
• Show list by any key
• Support filter items
• Note: It's important to set lineHeight to style because of the position of suggest list base on this.

Install

Use npm:

npm install --save react-easy-auto-complete-input

Use yarn:

yarn add react-easy-auto-complete-input

Test

npm test

Usage

.item {
  display: flex;
  padding: 3px;
}
 
.item > div {
  flex: 1
}
 
.item:hover {
  background-color: gray;
}
 
.item-code {
  text-align: right;
}
 
.hovered {
  background-color: gray;
}

import React, { Component } from 'react'
 
import MyComponent from 'react-easy-auto-complete-input'
import 'react-easy-auto-complete-input/dist/index.css'
 
type Country = {
  Code: string;
  Name: string;
}
 
class Example extends Component {
  render() {
    const items: Country[] =[
      {"Code": "AF", "Name": "Afghanistan"},
      {"Code": "AX", "Name": "land Islands"},
      {"Code": "AL", "Name": "Albania"},
      {"Code": "VN", "Name": "Vietnam"}
    ];
 
    return <AutoComplete
                type='textarea'
                style={{ lineHeight: '22px' }}
                activeKey='@'
                filterBy='Name'
                items={items}
                formatSelectedItem={(item: StandardItem<Country>) => `__${item.params.Name}__`}
            >
              {
                (item: StandardItem<Country>) => {
                  return (
                    <div className={`item ${item.hovered ? 'hovered': ''}`}>
                      <div>
                      {item.params.Name}
                      </div>
                      <div className='item-code'>
                      {item.params.Code}
                      </div>
                    </div>
                  )
                }
              }
            </AutoComplete>
  }
}

Result images:

Trigger showwing suggest list by '@':

Continue entering will filter items:

Press enter or click on item which you want:

Demo

Live demo

Local

cd example && npm install && npm start

Props

WIP

#	Name	Type	Required	Default	Description
1	type	string	false	textarea	Type of element textare or input
2	activeKey	string	true	null	When press this key, the suggest list will appear
3	filterBy	string or (item: StandardItem<AutoCompleteItem>) => boolean	true	name	Use to filter suggest list, cannot be a field of item or a custom fucntion
4	items	object	true		suggested items
5	formatSelectedItem	(item: StandardItem<AutoCompleteItem>) => string	true		Used to format selected item
6	value	string	false	""	Init value of textarea or input
7	onChanged	(value: string) => void	false		Invoked when value change by input from keyboard or select item
8	onSelect	(item: AutoCompleteItem) => void	false		Invoked when item is selected
9	className	string	false		Custom classNames for textarea or input
10	style	object	false		Custom style for textarea or input

License

MIT © huytd