AutoSuggest

A

A JavaScript plugin to implement IDE like autocompletion.

Features
  • Supports input, textarea and contenteditable fields.
  • Supports async loading of suggestions.
  • Ability to use any set of characters as a trigger.
  • Suggestion specific triggers usingon property.
  • Provide proper explanation for a suggestion usingshow property.
  • use property defines the value to be inserted on selecting a suggestion.
  • Define the position of cursor after selecting a suggestion usingfocus property.
Demo

We will use following code, which covers all possible configurations in all possible input fields.


const instance = new AutoSuggest({
    caseSensitive: false,
    suggestions: [
        {
            trigger: '<',
            values: [
                {
                    value: 'script',
                    use: '<script type="text/javascript" src="path/to/jsfile"></script>',
                    focus: [-25, -11]
                },
                {
                    value: 'link',
                    use: '<link href="path/to/cssfile" rel="stylesheet" />',
                    focus: [-36, -21]
                }
            ]
        }, {
            trigger: '@',
            values: [
                {
                    on: ['avcs', 'cham', 'chandu'],
                    show: 'Chandrasekhar Ambula V',
                    use: '@AmbulaV'
                },
                {
                    on: ['pj'],
                    show: 'Peter John',
                    use: '@John'
                }
            ]
        }, {
            trigger: '//',
            caseSensitive: true,
            values: ['hello', 'world', 'idiot', 'peter', 'pro', 'avcs']
        }, function (keyword, callback) {
            keyword = keyword.toLowerCase();

            var results = [];
            var dataset = $('#input').val() + $('#textarea').val();
            dataset = dataset.toLowerCase().split(/s+/);
            dataset.forEach(function(word) {
                if (
                    word.length >= 4 &&
                    !word.indexOf(keyword) &&
                    word !== keyword &&
                    results.indexOf(word) === -1
                ) {
                    results.push(word);
                }
            });
            callback(results);
        }
    ]
}, $('#input'), document.getElementById('textarea'));

instance.addInputs(document.getElementById('contenteditable'));
// instance.removeInputs(document.getElementById('input'));
// instance.destroy(); // removes autosuggest from all inputs
                                
Input Demo
Textarea Demo
Contenteditable Demo

Chandrasekhar Ambula V

AvcS

I am a software engineer with JavaScript as my major skill. I have been in field since June 2012.

I am an expert in developing Interactive and Responsive user interfaces. I have experience in developing web apps and websites from scratch.

Get in touch