Custom multiple autocomplete

Updated to get extra features:

1. Autocomplete prefix
2. To trigger autocomplete apply with Enter or Tab
3. 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 |

Preview

Suggestions

Suggestions after prefix

Prefix autocomplete

Credits:

This is modified solution from phuoc.ng

Changelog

1.2.3

• Package JSON fix

1.2.2

• Updated readme and example

1.2.0

• change prefix autocomplete trigger

1.1.1

• Fixed readme file

1.1.0

• Fixed removing extra space when adding prefix
• Allow suggestion after prefix without extra space in between

1.0.17

• Added height resize

1.0.16

• Added autocomplete for prefix on "@"
• Removed autocomplete on right arrrow →

1.0.15

• Fixed keeping prefix after update suggestion

1.0.14

• Fixed suggestion replacment. It was deleting word only up till where the cursor is

1.0.13

• Updated readme

1.0.12

• Add option to change number max of suggestions

1.0.11

• added option to pass custom textarea id

1.0.10 - 1.0.6

• Refactor

1.0.5

• moved suggestions and prefix to the new files

1.0.4 - 1.0.3

• Refactor

1.0.2

• Clean up

1.0.1

• update to read global variables if declared

1.0.1

• release