Lista de autocompletar con disparador personalizado-AutoSuggest. js

Vista prévia

Descripción

La biblioteca JavaScript AutoSuggest. js para mostrar una lista de autocompletar al vincular caracteres de desencadenador en un campo de entrada, elemento TEXTAREA o contenedor contentEditable.

Un uso típico de la librería es imitar la funcionalidad @metion como se ve en github & Facebook.

Funcionamiento

Instale & importar el paquete.

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

import AutoSuggest from '@avcs/autosuggest';

O directamente vincular al complemento AutoSuggest. js.

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

Defina sus propias sugerencias de la siguiente manera:

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);



}

]
}

Inicialice la biblioteca y adjunte el autocompletar a un campo de texto.

var instance = new AutoSuggest(options, field);

Adjunte el autocompletar a un nuevo campo de texto.

instance.addInputs(newField);

Quite el autocompletar de un campo de texto.

instance.removeInputs(Field);

Destruye la biblioteca de autocompletar.

instance.destroy();

Registro de cambios

v1.6.1 (03/24/2019)

• Bugfix

v1.5.2 (03/23/2019)

• Corrección de errores: el cálculo de la altura de línea para la entrada va mal con pre

v1.5.0 (02/14/2019)

• Soporte para selección de múltiples caracteres

v1.4.0 (02/10/2019)

• Correcciones de errores asíncronas + IU de cargador asincrónico

v1.3.0 (02/09/2019)

• Selección de correcciones de errores relacionados + mejor posicionamiento desplegable

v1.1.1 (01/21/2019)

• archivo CSS para los estilos desplegables