{"id":11559,"library":"pixabay-javascript-autocomplete","title":"Pixabay JavaScript Autocomplete","description":"This package provides a lightweight, vanilla JavaScript solution for autocomplete and autosuggest functionalities. Released in 2015, its current stable version is 1.0.4, last updated in February 2016. It distinguishes itself by having no external dependencies, a small footprint (less than 2.4 KB gzipped), and extensive browser support down to Internet Explorer 8+. It was developed by Pixabay.com and features a flexible data source, smart caching, configurable delay, and minimum character settings. Its release cadence was short-lived, with the last update nearly a decade ago, indicating it is no longer actively maintained. While functional for its intended environment, it lacks modern JavaScript ecosystem integrations.","status":"abandoned","version":"1.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/Pixabay/JavaScript-autoComplete#readme","tags":["javascript","autocomplete","autosuggest","autosuggester","suggest","suggester","completer","select","dropdown"],"install":[{"cmd":"npm install pixabay-javascript-autocomplete","lang":"bash","label":"npm"},{"cmd":"yarn add pixabay-javascript-autocomplete","lang":"bash","label":"yarn"},{"cmd":"pnpm add pixabay-javascript-autocomplete","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This library is designed for direct script inclusion in HTML. It exposes the `autoComplete` constructor globally and does not inherently support ES modules or CommonJS `require` syntax. Attempts to import it using modern module syntaxes will result in errors.","wrong":"import { autoComplete } from 'pixabay-javascript-autocomplete';\nconst autoComplete = require('pixabay-javascript-autocomplete');","symbol":"autoComplete","correct":"Include <script src=\"path/to/autocomplete.min.js\"></script> in your HTML. The `autoComplete` constructor will then be globally available."}],"quickstart":{"code":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Autocomplete Demo</title>\n    <!-- Assuming autocomplete.min.js is in the same directory -->\n    <script src=\"autocomplete.min.js\"></script>\n    <style>\n        .autocomplete-suggestions {\n            border: 1px solid #999;\n            background: #FFF;\n            overflow: auto;\n            max-height: 150px;\n        }\n        .autocomplete-suggestion {\n            padding: 2px 5px;\n            white-space: nowrap;\n            overflow: hidden;\n            cursor: pointer;\n        }\n        .autocomplete-selected {\n            background: #F0F0F0;\n        }\n        .autocomplete-suggestions strong {\n            font-weight: normal;\n            color: #3399FF;\n        }\n    </style>\n</head>\n<body>\n    <h1>Search for fruits:</h1>\n    <input type=\"text\" id=\"my-input\" placeholder=\"Start typing...\">\n\n    <script>\n        new autoComplete({\n            selector: '#my-input',\n            minChars: 1,\n            source: function(term, suggest){\n                term = term.toLowerCase();\n                const choices = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape', 'Honeydew', 'Kiwi', 'Lemon', 'Mango', 'Nectarine', 'Orange', 'Papaya', 'Quince', 'Raspberry', 'Strawberry', 'Tangerine', 'Ugli Fruit', 'Vanilla Bean', 'Watermelon', 'Xigua', 'Yellow Passion Fruit', 'Zucchini'];\n                const matches = [];\n                for (let i=0; i<choices.length; i++)\n                    if (~choices[i].toLowerCase().indexOf(term)) matches.push(choices[i]);\n                suggest(matches);\n            }\n        });\n    </script>\n</body>\n</html>","lang":"javascript","description":"This HTML example demonstrates how to include the `autocomplete.min.js` script and initialize the `autoComplete` constructor on an input field with a static data source."},"warnings":[{"fix":"For new projects or applications requiring ongoing support and modern features, consider using a more actively maintained autocomplete library.","message":"This library has not been updated since February 2016 (version 1.0.4). It is considered unmaintained, meaning it will not receive new features, bug fixes, or security patches.","severity":"gotcha","affected_versions":">=1.0.4"},{"fix":"For modern build environments, you may need to load it as a global script and expose it via a custom entry point, or use a shim. Alternatively, opt for an autocomplete library built for modular JavaScript.","message":"The library is designed for direct script inclusion and exposes a global `autoComplete` constructor. It does not natively support ES Modules or CommonJS, making integration with modern JavaScript build tools (Webpack, Vite, Rollup) complex without custom shims or wrappers.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"If accessibility, type safety, or cutting-edge browser features are critical, evaluate newer alternatives. You would need to provide custom TypeScript declarations if using TypeScript.","message":"Due to its age and lack of updates, this library may not leverage modern browser APIs, accessibility standards (ARIA attributes), or performance optimizations available in contemporary JavaScript solutions. It also lacks official TypeScript type definitions.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Avoid using this library directly with modern JavaScript frameworks unless you implement careful encapsulation and manual DOM management within the framework's lifecycle, which is generally discouraged.","message":"The library directly manipulates the DOM. When integrated into applications using frameworks like React, Vue, or Angular that manage their own virtual DOM, this can lead to conflicts, unexpected behavior, or performance issues.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure the `<script src=\"path/to/autocomplete.min.js\"></script>` tag is correctly placed in your HTML, preferably before any script attempting to use `new autoComplete()`, typically at the end of the `<body>`.","cause":"The `autocomplete.min.js` script was not included in the HTML, or the script path was incorrect, preventing the global `autoComplete` constructor from being available.","error":"ReferenceError: autoComplete is not defined"},{"fix":"Provide a valid CSS selector string (e.g., `'#my-input'`) or a direct DOM element reference for the `selector` option when initializing `autoComplete`.","cause":"The `selector` option passed to `new autoComplete()` is either missing, null, undefined, or not a valid string selector/DOM element.","error":"TypeError: 'selector' option must be a string or a DOM element."},{"fix":"Set the `source` option to an array of possible suggestion strings (e.g., `['apple', 'banana']`) or a function that asynchronously or synchronously calls `suggest(matches)`.","cause":"The `source` option, which provides the data for suggestions, is not configured as either an array of strings or a function that accepts `term` and `suggest` arguments.","error":"TypeError: 'source' property of Options object must be an array or a function."}],"ecosystem":"npm"}