Autocomplete List With Custom Trigger – AutoSuggest.js

Preview:

Description:

The 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.

How to use it:

Install & import the package.

# NPM
$ npm install @avcs/autosuggest --save

import AutoSuggest from '@avcs/autosuggest';

Or directly link to the AutoSuggest.js plugin.

<script src="/path/to/AutoSuggest.js"></script>

Define your own suggestions as follows:

let options = {
  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);
      }
  ]
}

Initialize the library and attach the autocomplete to a text field.

var instance = new AutoSuggest(options, field);

Attach the autocomplete to a new text field.

instance.addInputs(newField);

Remove the autocomplete from a text field.

instance.removeInputs(Field);

Destroy the autocomplete library.

instance.destroy();

Changelog:

v1.7.4 (11/18/2020)

• Automatic dropup support + scoped styles

v1.7.3 (07/13/2019)

• Minor bugfixes and improvements

v1.7.2 (07/13/2019)

• Bugfix: Javascript error when showing suggestions without trigger

v1.7.1 (07/01/2019)

• Updated validations and fixed the case where some validations are failing in some cases

v1.7.0 (06/27/2019)

• First release that’s tested across all Major browsers including IE11 and EDGE.

v1.6.3 (06/10/2019)

• Bugfix

v1.6.2 (04/19/2019)

• Events will receive the current input being manipulated as the context (this)

v1.6.1 (04/19/2019)

• Bugfix

v1.5.2 (03/23/2019)

• Bugfix: line-height calculation for input is going wrong with pre

v1.5.0 (02/14/2019)

• Support for multiple character selection

v1.4.0 (02/10/2019)

• Async bugfixes + async loader UI

v1.3.0 (02/09/2019)

• Selection related bugfixes + better dropdown positioning

v1.1.1 (01/21/2019)

• css file for dropdown styles