Autocomplete List With Custom Trigger – AutoSuggest.js

Category: Javascript | June 10, 2019
Author: avcs06
Views Total: 504
Official Page: Go to website
Last Update: June 10, 2019
License: MIT

Preview:

Autocomplete List With Custom Trigger – AutoSuggest.js

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

You Might Be Interested In:


Leave a Reply