https://github.com/deepansumor/tagitjs
TagIt.js is a lightweight JavaScript library that provides real-time, configurable tag suggestion functionality for both contentEditable elements and input/textarea fields. It supports custom triggers, async data loading with debouncing, middleware, and dynamic suggestion management.
https://github.com/deepansumor/tagitjs
async autcomplete autocomplete contenteditable frontend javascript tag-suggestion web-development
Last synced: about 1 month ago
JSON representation
TagIt.js is a lightweight JavaScript library that provides real-time, configurable tag suggestion functionality for both contentEditable elements and input/textarea fields. It supports custom triggers, async data loading with debouncing, middleware, and dynamic suggestion management.
- Host: GitHub
- URL: https://github.com/deepansumor/tagitjs
- Owner: deepansumor
- Created: 2025-02-22T11:26:55.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-22T14:17:41.000Z (over 1 year ago)
- Last Synced: 2025-06-15T16:43:36.923Z (about 1 year ago)
- Topics: async, autcomplete, autocomplete, contenteditable, frontend, javascript, tag-suggestion, web-development
- Language: TypeScript
- Homepage: https://deepansumor.github.io/TagItJS/
- Size: 40 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TagIt.js
TagIt.js is a robust JavaScript library for managing tag suggestions in contentEditable elements as well as input/textarea fields. It supports configurable trigger characters, middleware for filtering or transforming suggestions, asynchronous suggestion fetching with debouncing, real-time suggestion management, and scoring-based suggestion sorting.
## Features
- **Configurable Trigger**: Set your own trigger character (default is `@`).
- **Middleware Support**: Easily filter or transform suggestions.
- **Async Data Loading**: Fetch suggestions asynchronously with debouncing.
- **Real-Time Updates**: Add or remove suggestions dynamically.
- **Scoring & Sorting**: Suggestions are scored and sorted based on match quality.
- **Dual Compatibility**: Works seamlessly with both contentEditable elements and input/textarea fields.
- **Verbose Logging**: Enable logging for debugging.
## Installation
You can install TagIt.js include the bundled JavaScript via a CDN or local.
Or include via a `` tag:
```html
<script src="../dist/tagIt.min.js">
```
```html
```
## Usage
### Basic Example with ContentEditable
```html
TagIt.js Demo - ContentEditable
#editor {
border: 1px solid #ccc;
padding: 10px;
min-height: 150px;
background: #fff;
}
TagIt.js - ContentEditable Example
Type '#' here...
// Convert suggestion strings into suggestion objects.
var suggestions = ['Alice', 'Bob', 'Charlie', 'David', 'Eve'].map(function(s) {
return { display: s, key: s };
});
// Fake async fetch function to simulate a delay.
function fakeFetchSuggestions() {
return new Promise(function(resolve) {
setTimeout(function() {
resolve([
{ display: 'Alice', key: 'Alice' },
{ display: 'Bob', key: 'Bob' },
{ display: 'Charlie', key: 'Charlie' },
{ display: 'David', key: 'David' },
{ display: 'Eve', key: 'Eve' },
{ display: 'Mallory', key: 'Mallory' }
]);
}, 500);
});
}
// Initialize TagIt on the contentEditable element.
var editor = document.getElementById('editor');
if (editor) {
var tagItInstance = new TagIt(editor, {
suggestions: suggestions,
keepTrigger: true,
triggerChar: "#",
maxSuggestions: 5,
minScore: 0.5,
debounceTime: 300,
enableLog: true,
fetchSuggestions: fakeFetchSuggestions
});
// Middleware: Only include suggestions with a key longer than 3 characters.
tagItInstance.use(function(suggestions) {
return suggestions.filter(function(item) {
return item.key.length > 3;
});
});
// Example: Add a new suggestion in real-time after 3 seconds.
setTimeout(function() {
tagItInstance.addSuggestion({ display: 'Zoe', key: 'Zoe' });
console.log("Added suggestion: Zoe");
}, 3000);
// Example: Remove a suggestion in real-time after 6 seconds.
setTimeout(function() {
tagItInstance.removeSuggestion('Bob');
console.log("Removed suggestion: Bob");
}, 6000);
}
```
### Example with Textarea
```html
TagIt.js Demo - Textarea
#textarea {
width: 100%;
height: 150px;
padding: 10px;
border: 1px solid #ccc;
background: #fff;
}
TagIt.js - Textarea Example
var suggestions = ['Alice', 'Bob', 'Charlie', 'David', 'Eve'].map(function(s) {
return { display: s, key: s };
});
// Fake async fetch function.
function fakeFetchSuggestions() {
return new Promise(function(resolve) {
setTimeout(function() {
resolve([
{ display: 'Alice', key: 'Alice' },
{ display: 'Bob', key: 'Bob' },
{ display: 'Charlie', key: 'Charlie' },
{ display: 'David', key: 'David' },
{ display: 'Eve', key: 'Eve' },
{ display: 'Mallory', key: 'Mallory' }
]);
}, 500);
});
}
// Initialize TagIt on the textarea.
var textarea = document.getElementById('textarea');
if (textarea) {
new TagIt(textarea, {
suggestions: suggestions,
maxSuggestions: 5,
debounceTime: 300,
enableLog: true,
fetchSuggestions: fakeFetchSuggestions
});
}
```
## Configuration Options
| Option | Type | Default | Description |
|-------------------|-----------------------------------|---------|------------------------------------------------------------------|
| suggestions | SuggestionItem[] | `[]` | Initial array of suggestion objects. |
| keepTrigger | boolean | `false` | Whether to keep the trigger character in the inserted tag. |
| triggerChar | string | `'@'` | The character that triggers the tag suggestion dropdown. |
| maxSuggestions | number | `5` | Maximum number of suggestions to display in the dropdown. |
| minScore | number | `0` | Minimum match score (0–1) for a suggestion to be shown. |
| fetchSuggestions | () => Promise | `undefined` | Async function for fetching suggestions dynamically. |
| debounceTime | number | `300` | Delay in milliseconds for debouncing async fetch calls. |
| enableLog | boolean | `false` | Enable logging for debugging. |
## API
### Methods
- **use(middleware: SuggestionMiddleware): void**
Registers a middleware function to transform or filter suggestions.
- **addSuggestion(suggestion: SuggestionItem): void**
Adds a new suggestion in real-time.
- **removeSuggestion(key: string): void**
Removes a suggestion by its key.
- **destroy(): void**
Cleans up event listeners and removes the dropdown element.
## Contributing
Contributions are welcome! Please feel free to open an issue or submit a pull request with improvements or bug fixes.
## License
This project is licensed under the MIT License.