studio-auto-complete

This is an auto-complete component for reactJS.

Props

name	type	default	description
className?	string	""	Class name of the component
placeholder?	string	""	Placeholder for the input
items	any[] | Dictionary<any>		Items to be shown in the dropdowns
defaultItems?	any[] | Dictionary<any>	null	Items to be shown in the dropdowns
searchAttribute?	string	null	This is a value of the attribute the data will be filtered by
labelAttribute?	string	null	This is a value of the attribute the data shown in the list
onInputChange?	(value: string) => void	null	A function called when a change on input is triggered
onEnterPress?	(value: any) => void	null	A function which is trigered when enter button is clicked
hasBlur?	boolean	true	True if the component should hide dropdown when clicked somewhere else
shouldExecuteOnEnter?	boolean	null	OnClick execute the on enter function
charInputNumber?	number	0	number of characters to input in order to show the dropdown
shouldClearOnExecution?	boolean	true	if input should clear on execution
onItemSelected?	(event:React.SyntheticEvent<any>, item: any) => void;	null	Function to be called when an item is selected
shouldAlwaysShowOptions?	boolean	false	true if the options should always be visible
customComponent?	(item: any) => React.ReactNode	null	function that returns a custom component as a list item

Usage

import {Autocomplete} from 'studio-auto-complete'; 
import "path/to/node_modules/studio-auto-complete/src/autocomplete.scss";

Simple example

<Autocomplete
    className="example__autocomplete"
    shouldClearOnExecution={true}
    items={[{ key: "john", name: "John" }, { key: "doe", name: "Doe" }]}
    placeholder={`Search by name`}
    labelAttribute="name"
    searchAttribute="name"
    onItemSelected={(e,item) => {
        //TODO code
    }}
>
</Autocomplete>

Custom component example

<Autocomplete
    className="example__autocomplete"
    shouldClearOnExecution={true}
    items={[{ key: "john", name: "John" }, { key: "doe", name: "Doe" }]}
    placeholder={`Search by name`}
    labelAttribute="name"
    searchAttribute="name"
    onItemSelected={(e,item) => {
        //TODO code
    }}
    customComponent={(item)=>{
        return <AvatarImage key={item.key} label={item.label} />
    }}
>
</Autocomplete>