Author: | Pixabay |
---|---|
Views Total: | 5,385 views |
Official Page: | Go to website |
Last Update: | July 12, 2018 |
License: | MIT |
Preview:

Description:
A pure vanilla JavaScript library to provide flexible autocomplete / autosuggest dropdown to your input field as typing. Supports local data or remote source via AJAX.
Basic usage:
Add the auto-complete.css and auto-complete.js into your html page.
<link rel="stylesheet" href="auto-complete.css"> <script src="auto-complete.js"></script>
Enable the autocomplete on an input field and pass the options through an object of key/value pairs.
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); } });
Available settings.
// 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){}
Destroy the autocomplete.
demo.destroy();
Changelog:
07/12/2018
- added offsetLeft/offsetTop as optional parameter for suggestions container.