Dynamic Auto Suggestion For Text Fields – TagIt.js

TagIt.js is an autocomplete JavaScript library that enables dynamic, real-time, configurable auto-suggestion on text fields such as contentEditable elements, textarea, and input fields.

When you press a trigger character (typically ‘@’ or ‘#’), an auto-complete popup appears next to it with predefined suggestions. This can help your users enter hashtags or mention someone quickly and accurately.

How to use it:

1. Download and load the TagIt.js library from the ‘dist’ folder in your HTML:

<script src="/dist/tagIt.js"></script>

2. Prepare your suggestions. These can be hard-coded or fetched dynamically.

var suggestions = ['JavaScript', 'CSS', 'HTML', 'React', 'Vue'].map(function(s) {
  return { display: s, key: s };
});
// This function simulates fetching from a server:
function fakeFetchSuggestions() {
  return new Promise(function(resolve) {
    setTimeout(function() {
      resolve([
        { display: 'JavaScript', key: 'JavaScript' },
        { display: 'CSS', key: 'CSS' },
        { display: 'HTML', key: 'HTML' },
        { display: 'React', key: 'React' },
        { display: 'Vue', key: 'Vue' },
        { display: 'Angular', key: 'Angular' }
      ]);
    }, 500);
  });
}

3. Select your target element and create a new TagIt instance with the following options:

• suggestions: SuggestionItem[] – Initial suggestion objects. (Default: [])
• keepTrigger: boolean – Keep trigger character after insertion? (Default: false)
• triggerChar: string – Character that triggers suggestions. (Default: '@')
• maxSuggestions: number – Maximum suggestions to display. (Default: 5)
• minScore: number – Minimum match score (0-1) for display. (Default: 0)
• fetchSuggestions: () => Promise<SuggestionItem[]> – Async function to fetch suggestions. (Default: undefined)
• debounceTime: number – Debounce delay (ms) for async fetches. (Default: 300)
• enableLog: boolean – Enable debugging logs. (Default: false)

var editor = document.getElementById('editor');
if (editor) {
  var tagItInstance = new TagIt(editor, {
    suggestions: suggestions,
    keepTrigger: true,
    triggerChar: "#",
    maxSuggestions: 3,
    minScore: 0.2,
    debounceTime: 300,
    enableLog: true,
    fetchSuggestions: fakeFetchSuggestions
});

4. You can use middleware to modify suggestions. For instance, you might want to filter based on length:

tagItInstance.use(function(suggestions) {
  return suggestions.filter(function(item) {
    return item.key.length > 3;
  });
});

5. Manage suggestions dynamically:

// add a new suggestion
tagItInstance.addSuggestion({ display: 'NextJS', key: 'NextJS' });
// remove a suggestion by its key
tagItInstance.removeSuggestion('NextJS');
// destroy the instance
tagItInstance.destroy();