{"id":11129,"library":"javascript-autocomplete","title":"JavaScript AutoComplete Library","description":"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.","status":"abandoned","version":"1.0.5","language":"javascript","source_language":"en","source_url":"https://github.com/RasCarlito/JavaScript-autoComplete","tags":["javascript","autocomplete","autosuggest","autosuggester","suggest","suggester","completer","select","dropdown"],"install":[{"cmd":"npm install javascript-autocomplete","lang":"bash","label":"npm"},{"cmd":"yarn add javascript-autocomplete","lang":"bash","label":"yarn"},{"cmd":"pnpm add javascript-autocomplete","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The library primarily exposes a global `AutoComplete` constructor when included via a \n"},{"note":"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.","wrong":"import AutoComplete from 'javascript-autocomplete'; // Incorrect for older Node.js/bundlers","symbol":"AutoComplete (CommonJS)","correct":"const AutoComplete = require('javascript-autocomplete');\n\nnew AutoComplete({\n selector: '#my-input',\n minChars: 1,\n source: function(term, suggest) { /* ... */ }\n});"},{"note":"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.","wrong":"import { AutoComplete } from 'javascript-autocomplete'; // No named export provided natively","symbol":"AutoComplete (ESM Bundled)","correct":"// Assuming a bundler is configured to handle CJS or a UMD build is used\nimport AutoComplete from 'javascript-autocomplete';\n\nnew AutoComplete({\n selector: '#my-input',\n minChars: 1,\n source: function(term, suggest) { /* ... */ }\n});"}],"quickstart":{"code":"\n\n JavaScript AutoComplete Demo\n \n\n\n
Search Programming Languages
\n \n\n \n \n\n","lang":"javascript","description":"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."},"warnings":[{"fix":"Consider migrating to a modern, actively maintained autocomplete library (e.g., Algolia Autocomplete, Headless UI Combobox, or a framework-specific solution) for security, compatibility, and feature updates.","message":"This library is no longer actively maintained. The last release was in 2016 (v1.0.5), meaning it does not receive updates for new JavaScript features, browser changes, or security vulnerabilities.","severity":"breaking","affected_versions":"<=1.0.5"},{"fix":"Ensure your bundler is configured to correctly import CommonJS/UMD modules. Alternatively, use it as a global script for simpler setups. For TypeScript, manual declaration files (`.d.ts`) would be required.","message":"The library is designed for global scope usage via a ` tag for `auto-complete.min.js` is placed in the HTML document before any script that attempts to use the `AutoComplete` constructor, typically at the end of the ``. Verify the script path is correct and accessible.","cause":"The `auto-complete.min.js` script was not loaded or executed before `new AutoComplete()` was called. This often happens if the script tag is placed incorrectly or if there's a network issue preventing the script from loading.","error":"ReferenceError: AutoComplete is not defined"},{"fix":"Verify that the `selector` (e.g., `'#search-field'`) accurately targets an existing HTML input element. Ensure that the `new AutoComplete()` call is deferred until the DOM is fully loaded, typically by placing the script at the end of `` or wrapping it in a `DOMContentLoaded` event listener.","cause":"This error can occur if the `selector` provided to `AutoComplete` does not match an existing DOM element, or if the element is not yet available when the AutoComplete instance is created.","error":"Uncaught TypeError: Cannot read properties of null (reading 'style')"}],"ecosystem":"npm"}