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
- 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.
Use npm:
npm install --save react-easy-auto-complete-input
Use yarn:
yarn add react-easy-auto-complete-input
npm test
.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>
}
}
Trigger showwing suggest list by '@':
Continue entering will filter items:
Press enter or click on item which you want:
cd example && npm install && npm start
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 |
MIT © huytd