{"id":16296,"library":"awesomplete","title":"Awesomplete","description":"Awesomplete is an ultra-lightweight, customizable, and dependency-free autocomplete widget designed for modern browsers. It provides an accessible solution for adding suggestion lists to input fields, aiming to fill the gap where native `` elements might fall short in customization or functionality. The current stable version is 1.1.7, which was last published to npm in 2018. While effective for its intended purpose, the project appears to be unmaintained, with no significant updates or active development in recent years. Its key differentiators include its minimal footprint (2KB minified & gzipped), zero dependencies, and the ability to be easily integrated via HTML attributes or a simple JavaScript API, offering flexibility for various use cases.","status":"abandoned","version":"1.1.7","language":"javascript","source_language":"en","source_url":"https://github.com/LeaVerou/awesomplete","tags":["javascript"],"install":[{"cmd":"npm install awesomplete","lang":"bash","label":"npm"},{"cmd":"yarn add awesomplete","lang":"bash","label":"yarn"},{"cmd":"pnpm add awesomplete","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Awesomplete is primarily accessed as a global object after including its script via a "},{"note":"While `awesomplete.js` is set as the `main` entry in `package.json`, enabling CommonJS `require`, the library does not provide native ES module exports. Attempting to use `import` without bundler configuration will likely fail.","wrong":"import Awesomplete from 'awesomplete';","symbol":"Awesomplete","correct":"const Awesomplete = require('awesomplete');\n// Then use `new Awesomplete(...)`"},{"note":"For basic setup, direct HTML inclusion of the CSS and JS files is the most reliable method, especially in non-bundler environments. Relying on module imports for CSS/JS requires appropriate bundler loaders/plugins.","wrong":"import 'awesomplete/awesomplete.css'; // May not work depending on bundler config\nimport 'awesomplete/awesomplete.js';","symbol":"CSS and JS","correct":"\n"}],"quickstart":{"code":"\n\n\n \n \n Awesomplete Quickstart\n \n\n\n

Awesome Autocomplete

\n\n \n \n\n

Programmatic Example

\n \n \n\n \n \n\n","lang":"javascript","description":"This quickstart demonstrates both declarative HTML-based setup with `data-list` and programmatic JavaScript instantiation for an autocomplete input, showing how to link a custom list of suggestions and configure basic options like `minChars` and `autoFirst`."},"warnings":[{"fix":"Ensure you are using `v1.1.4` or later to avoid the reverted breaking change. The project documentation does not specify the exact nature of the break.","message":"A breaking change was introduced in `v1.1.3` or `v1.1.4` (exact version unclear from provided data), but was subsequently reverted in `v1.1.4`.","severity":"breaking","affected_versions":"v1.1.3 (briefly)"},{"fix":"For new projects, consider more actively maintained alternatives. If used in existing projects, be aware of potential long-term compatibility or security issues. Thoroughly test with modern browsers and review for any known vulnerabilities.","message":"Awesomplete is largely unmaintained. The last significant update was in 2018 (version 1.1.7). This means it may not receive updates for new browser features, security vulnerabilities, or bug fixes. Community support is also limited.","severity":"gotcha","affected_versions":">=1.1.7"},{"fix":"For CommonJS, use `const Awesomplete = require('awesomplete');`. For ES modules in a bundler, you might need to configure your bundler to handle CommonJS modules or continue to load it as a global script and rely on `window.Awesomplete`.","message":"The library primarily exposes `Awesomplete` as a global variable. In environments using module bundlers (Webpack, Rollup, Parcel), attempting to `import Awesomplete from 'awesomplete'` will not work directly as the package lacks native ES module exports. It only defines a `main` entry for CommonJS.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Install `@types/awesomplete` separately (`npm install --save-dev @types/awesomplete`). Be prepared to write custom type declarations or cast types (`as any`) for parts of the API not fully covered or accurately reflected.","message":"Awesomplete does not officially ship with TypeScript definitions. While `@types/awesomplete` is available on DefinitelyTyped, it is also somewhat outdated (last updated ~2 years ago) and may not perfectly reflect the runtime API, especially for edge cases or specific event types.","severity":"gotcha","affected_versions":"All versions"},{"fix":"After updating the `list` property of an Awesomplete instance (e.g., `awesomplete.list = newList;`), explicitly call `awesomplete.evaluate();` to force a re-evaluation and redraw of the suggestion list.","message":"When dynamically manipulating the suggestion list while the Awesomplete popup is open, changes may not immediately reflect. The `evaluate()` method must be called to refresh the displayed suggestions.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Ensure `awesomplete.js` is included via a `