Fuzzy-area NPM

Custom multiple autocomplete

Updated to get extra features:

Autocomplete prefix
To trigger autocomplete apply with Enter or Tab
Fuzzy search

Change triggers

Update prefixes.js

export const prefixes = [" ", "sm:", "md:"];

Change autocomplete aka suggestions

export const suggestions = [
    "white",
    "yellow",
    "blue",
    "red",
    "green",
    "black",
    "brown",
    "azure",
    "ivory",
    "teal",
];

Basic markup

<div class="container" id="fuzzyarea">
    <textarea class="container__textarea"></textarea>
</div>

// index.js

import { initializeFuzzyArea } from 'fuzzy-area';

// Initialize with default ID (#fuzzyarea)
initializeFuzzyArea();

// Initialize options
initializeFuzzyArea({ 
    containerId: 'myCustomContainerId', // Custom container id
    maxSuggestions: 20,                 // Number of maximum suggestions
    resize: true,                       // Resize height of text area as text grow
    prefixMention: ["@", "#", ":"],     // Trigger prefix suggestions
});

Props

Property	Type	Default	Description
containerId	string	'fuzzyarea'	ID of the container in which textarea exists, which is to be made autocomplete.
textareaId	string	null	ID of the textarea, which is to be made autocomplete. If not provided then uses textarea in container.
waitForElement	boolean	false	Should it wait for the element to exist in the DOM, useful for dynamically added textareas.
maxSuggestions	number	Default is 10	Change number of maximum suggestions.
resize	boolean	Default false	Resize heght of text area as you type
prefixMention	array	Default is @	add away of cherasters to use to get suggestions for prefixes