Biblioteca de autocompletar flexible Pure JavaScript ligera

Vista prévia

Descripción

Una biblioteca de JavaScript Pure Vanilla para proporcionar una lista desplegable flexible de autocompletado/la AutoSuggest a su campo de entrada como mecanografía. Admite datos locales o fuentes remotas a través de AJAX.

¿Cómo funciona?

Añade auto-complete. CSS y auto-complete. js a tu página HTML.

<link rel="stylesheet" href="auto-complete.css">
<script src="auto-complete.js"></script>

Habilite el autocompletar en un campo de entrada y pase las opciones a través de un objeto de pares clave-valor.

var demo = new autoComplete({


selector: '#demo',


minChars: 1,


source: function(term, suggest){




term = term.toLowerCase();




var choices = ['ActionScript', 'AppleScript', 'Asp', 'Assembly', 'BASIC', 'Batch', 'C', 'C++', 'CSS', 'Clojure', 'COBOL', 'ColdFusion', 'Erlang', 'Fortran', 'Groovy', 'Haskell', 'HTML', 'Java', 'JavaScript', 'Lisp', 'Perl', 'PHP', 'PowerShell', 'Python', 'Ruby', 'Scala', 'Scheme', 'SQL', 'TeX', 'XML'];




var suggestions = [];




for (i=0;i<choices.length;i++)






if (~choices[i].toLowerCase().indexOf(term)) suggestions.push(choices[i]);




suggest(suggestions);


}
});

Ajustes disponibles.

// Required selector for text input field or DOM element.
selector: 'string or DOM element',

// Required callback function to connect any data source to autoComplete.
 // source(term, response)
// term: which refers to the value currently in the text input.
// response: A response callback, which expects a single argument: the data to suggest to the user.
 source: null,

// Minimum number of characters (>=1) a user must type before a search is performed.
minChars: 3,

// The delay in milliseconds between when a keystroke occurs and when a search is performed.
 // A zero-delay is more responsive, but can produce a lot of load.
delay: 150,

// offsets
offsetLeft: 0,
offsetTop: 1,

// Determines if performed searches should be cached.
cache: true,

// Custom class/es that get/s added to the dropdown menu container.
 menuClass: '',

// A function that gives you control over how suggestions are displayed.
 renderItem: function (item, search){

var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi");

return '<div class="autocomplete-suggestion" data-val="' + item + '">' + item.replace(re, "<b>$1</b>") + '</div>';
},

// A callback function that fires when a suggestion is selected by mouse click or pressing enter.
// onSelect(event, term, item)
onSelect: function(e, term, item){}

Destruye el autocompletar.

demo.destroy();

Registro de cambios

07/12/2018

• se agregó offsetLeft/offsetTop como parámetro opcional para el contenedor de sugerencias.