Autosuggest / Autocomplete jQuery Plugin – AutoSuggest.js

by Posted on

A JavaScript plugin to implement IDE like autocompletion in input, textarea or contenteditable fields. AutoSuggest.js JavaScript library to display an autocomplete list when you tying trigger characters in an input field, textarea element or contenteditable container. A typical use of the library is to mimic the @metion functionality as you see on Github & Facebook.
autosuggest-jquery-plugin

Features

  • Supports input, textarea and contenteditable fields
  • No external dependencies like jquery or bootstrap
  • Can add and remove inputs dynamically.
  • Can use any character or any sequence of characters as a trigger.
  • If no trigger is passed will use space as a trigger.
  • Trigger character will also be removed when inserting a suggestion except for the above case.
  • Can supply an array of strings as Suggestions.
  • Can supply an array of objects as Suggestions to get fine control over the behavior of suggestions.



  • Can pass HTML inside Suggestion.show if you want to design how the suggestion is shown in the dropdown.
  • Can pass HTML in Suggestion.insertText if you want to show HTML as is in the contenteditable fields.
  • Can pass HTML in Suggestion.insertHTML if you want to insert HTML as evaluated DOM elements in contenteditable fields.
  • Can pass a Function in SuggestionList.values which will receive the keyword and generates Suggestions dynamically.
    • Supports Async allowing you to fetch suggestions over API calls, shows a loader until the callback is executed.
    • By default the plugin matches all suggestions that starts with keyword, if you want more control over matching, like fuzzy search, you can use Function to plug the behavior into the plugin.
  • Current scroll states are considered when calculating the position of dropdown.
  • Considers line-height of the trigger character (height in case of input) to determine the position of dropdown.
  • Can use Up and Down arrows to navigate between multiple suggestions when dropdown is active
  • Can use Enter or Tab key to insert the current selected Suggestion in the dropdown
  • Can use Esc key to close the dropdown.
  • Dropdown will be shown on keydown or mousedown inside the input field, when the value before the current selection ends with “trigger + keyword” (without spaces) and the immediate character after the selection does not belong to a-zA-Z0-9_ (Anything inside the selection will not be considered inside keyword)
  • In case of contenteditable, if the selection spans over multiple nodes with different styles, the suggestion will be inserted into the first node, hence follows the style of the first node.

Libraries

Include library on page.

<script type="text/javascript" src="@avcs/autosuggest/dist/AutoSuggest.js"></script>



Here is an example which covers all possible configurations in all possible input fields.

const instance = new AutoSuggest({
    caseSensitive: false,
    onChange: function(suggestion) {
        console.log(`"${suggestion.insertHtml || suggestion.insertText}" has been inserted into #${this.id}`);
    },
    suggestions: [
        {
            trigger: '<',
            values: [
                {
                    value: 'script',
                    insertText: '<script type="text/javascript" src="path/to/jsfile"></script>',
                    focusText: [-25, -11],
                    insertHtml: '&lt;<span style="color: red">script</span>&nbsp;<span style="color:green">type</span>=<span style="color:darksalmon">"text/javascript"</span>&nbsp;<span style="color:green">src</span>=<span style="color:darksalmon">"path/to/jsfile"</span>&gt;&lt;/<span style="color: red">script</span>&gt;',
                    focusHtml: [-25, -11],
                },
                {
                    value: 'link',
                    insertText: '<link href="path/to/cssfile" rel="stylesheet" />',
                    focusText: [-36, -21],
                    insertHtml: '&lt;<span style="color:red">link</span> <span style="color:green">href</span>=<span style="color:darksalmon">"path/to/cssfile"</span> <span style="color:green">rel</span>=<span style="color:darksalmon">"stylesheet"</span> /&gt;',
                    focusHtml: [-36, -21],
                }
            ]
        }, {
            trigger: '@',
            values: [
                {
                    on: ['avcs', 'cham', 'chandu'],
                    show: 'Chandrasekhar Ambula V',
                    insertText: '@AmbulaV',
                    insertHtml: '<a href="/" target="_blank">@AmbulaV</a>'
                },
                {
                    on: ['pj'],
                    show: 'Peter John',
                    insertText: '@John',
                    insertHtml: '<a href="/" target="_blank">@John</a>'
                }
            ]
        }, {
            trigger: '//',
            caseSensitive: true,
            values: ['hello', 'world', 'idiot', 'peter', 'pro', 'avcs']
        }, function (keyword, callback) {
            const keyword = $0.toLowerCase();
            const results = [];
 
            let dataset = this.value || this.textContent;
            dataset = dataset.toLowerCase().split(/[^a-zA-Z0-9_]+/);
            dataset.forEach(function(word) {
                if (
                    word.length >= 4 &&
                    !word.indexOf(keyword) &&
                    word !== keyword &&
                    results.indexOf(word) === -1
                ) {
                    results.push(word);
                }
            });
            setTimeout(() => {
                callback(results);
            }, 300);
        }
    ]
}, $('#input'), document.getElementById('textarea'));
 
instance.addInputs(document.getElementById('contenteditable'));
// instance.removeInputs(document.getElementById('input'));
// instance.destroy(); // removes autosuggest from all inputs

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by avcs06, Visit their official github repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Published by admin