@willchui/my-autocomplete-tag
MyAutocompleteTag is a tagging componenet with autocomplete function.
- Create a tag from autocomplete dropdown or from input box directly.
- Tag css can be customized.
Install
npm install --save @willchui/my-autocomplete-tag
Usage
import React from 'react'
import { MyAutocompleteTag } from '@willchui/my-autocomplete-tag'
import '@willchui/my-autocomplete-tag/dist/index.css'
const App = () => {
const handleCallback = (tagsList, message, activeItem) =>{
console.log(JSON.stringify(tagsList));
console.log(message);
console.log(JSON.stringify(activeItem));
}
const sample = {
'enableDropdown': true,
'fromDropdownOnly': true,
'dropdown': [
{title:'Toyota RAV4'},
{title:'Toyota Camry'},
{title:'Lexus - IS'},
{title:'Lexus NX'},
{title:'Lexus LC customtag', tagPrefix: 'custom_tag_css_classname'},
{title:'Chevrolet Volt'},
{title:'Chevrolet Bolt'},
{title:'Hyundai Sonata'},
{title:'Hyundai Tucson'},
{title:'Ford Mustang'},
{title:'Ford GT'}]
};
return(<>
<div className="container">
<label>Sample (Create a tag from autocomplete dropdown only): </label>
<MyAutocompleteTag placeholder="Enter your favorite car" tagListChange={handleCallback} autocompleteapi={sample}/>
<hr />
</div>
</>)
}
API Prop
Name | Type | Default | Description |
---|---|---|---|
placeholder | string |
Empty String |
The describes the expected value of an input field. |
autocompleteapi | object |
The structure looks like: { 'enableDropdown': true, /** enable/disable the autocomplete function*/ 'fromDropdownOnly': true, /** Create a tag from dropdown only */ 'dropdown': [ {title:'Lexus NX'}, {title:'Lexus LC customtag', tagPrefix: 'custom_tag_css_classname'}, {title:'Ford GT'}] /** dropdown array for autocomplete, title is require, and tagPrefix is optional. */ } |
|
tagListChange | function |
Callback function when a tag is created or deleted, it will return an array of tag list, message and active tag. |
|
duplicate | booean |
true |
Set duplicate=true, it allows duplicate tag otherwise set it to false. |
MyAutocompleteTag Demo
Quick Demo in Stackblitz - MyAutocompleteTag.
License
MIT © willchui