Skip to content

willchui/my-autocomplete-tag

Repository files navigation

@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.

NPM JavaScript Style Guide

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.

Alt text

License

MIT © willchui

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published