Registry /
http-networking / javascript-autocomplete
JavaScript-autoComplete is an extremely lightweight and powerful vanilla JavaScript completion suggester. Developed by Pixabay.com, it provides flexible data sourcing, smart caching, and callback functionalities with no external dependencies. The library is very small, weighing in at less than 2.4 kB gzipped. It was last updated in 2016, with its current stable version being 1.0.5. Given its age and lack of recent development, it operates on a very slow release cadence and is primarily intended for environments where a minimal, standalone JavaScript solution is preferred over modern, framework-integrated alternatives. Key differentiators include its zero-dependency nature and extreme lightness, making it suitable for legacy projects or very simple, performance-critical contexts where a full-featured library would be overkill.
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
The library primarily exposes a global `AutoComplete` constructor when included via a <script> tag. It's designed for vanilla JS environments.
<script src="path/to/auto-complete.min.js"></script>
<script>
new AutoComplete({
selector: '#my-input',
minChars: 1,
source: function(term, suggest) { /* ... */ }
});
</script>
While not officially documented for module systems, for older Node.js or bundlers configured for CommonJS, it might be accessible via `require`. However, its design is pre-ESM.
const AutoComplete = require('javascript-autocomplete');
new AutoComplete({
selector: '#my-input',
minChars: 1,
source: function(term, suggest) { /* ... */ }
});
The library does not provide native ES Modules exports. If used in a modern ESM project, it typically requires a bundler (like Webpack or Rollup) to process its CommonJS/UMD output, which often results in a default import.
// Assuming a bundler is configured to handle CJS or a UMD build is used
import AutoComplete from 'javascript-autocomplete';
new AutoComplete({
selector: '#my-input',
minChars: 1,
source: function(term, suggest) { /* ... */ }
});
This quickstart demonstrates how to initialize the `AutoComplete` library on an input field using a static array as the data source and logs the selected item to the console.
<html>
<head>
<title>JavaScript AutoComplete Demo</title>
<style>
.autocomplete-suggestions {
border: 1px solid #999;
background: #FFF;
overflow: auto;
max-height: 200px;
position: absolute;
z-index: 9999;
}
.autocomplete-suggestion {
padding: 2px 5px;
white-space: nowrap;
overflow: hidden;
}
.autocomplete-selected {
background: #F0F0F0;
}
.autocomplete-suggestions strong {
font-weight: normal;
color: #3399FF;
}
</style>
</head>
<body>
<h1>Search Programming Languages</h1>
<input type="text" id="search-field" placeholder="Type a language...">
<script src="https://goodies.pixabay.com/javascript/auto-complete/auto-complete.min.js"></script>
<script>
const languages = [
'ActionScript', 'AppleScript', 'Asp', 'BASIC', 'C', 'C++', 'Clojure', 'CSS', 'Erlang',
'Go', 'Groovy', 'Haskell', 'HTML', 'Java', 'JavaScript', 'Lisp', 'Perl', 'PHP',
'Python', 'Ruby', 'Scala', 'Scheme', 'Swift', 'TypeScript', 'Rust', 'Kotlin'
];
new AutoComplete({
selector: '#search-field',
minChars: 1,
delay: 150,
source: function(term, suggest){
term = term.toLowerCase();
const suggestions = languages.filter(lang => lang.toLowerCase().includes(term));
suggest(suggestions);
},
onSelect: function(event, term, item){
console.log('Selected:', term);
// Optionally do something with the selected term, e.g., navigate or update other fields
}
});
</script>
</body>
</html>
Upgrade
Version history
Breaking-change detection hasn't run for this library yet.
Audit
Security & dependencies
CVE tracking and dependency tree are planned for a later release.