Pixabay JavaScript Autocomplete

1.0.4 · abandoned · verified Sun Apr 19

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.

Common errors

```
ReferenceError: autoComplete is not defined
```
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.

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>`.
```
TypeError: 'selector' option must be a string or a DOM element.
```
cause The `selector` option passed to `new autoComplete()` is either missing, null, undefined, or not a valid string selector/DOM element.

fix Provide a valid CSS selector string (e.g., `'#my-input'`) or a direct DOM element reference for the `selector` option when initializing `autoComplete`.
```
TypeError: 'source' property of Options object must be an array or a function.
```
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.

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)`.

Warnings

gotcha 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.
Fix: For new projects or applications requiring ongoing support and modern features, consider using a more actively maintained autocomplete library.
gotcha 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.
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.
gotcha 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.
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.
gotcha 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.
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.

Install

npm install pixabay-javascript-autocomplete npm
yarn add pixabay-javascript-autocomplete yarn
pnpm add pixabay-javascript-autocomplete pnpm

Imports

autoComplete
wrong:
```
import { autoComplete } from 'pixabay-javascript-autocomplete';
const autoComplete = require('pixabay-javascript-autocomplete');
```
correct:
```
Include <script src="path/to/autocomplete.min.js"></script> in your HTML. The `autoComplete` constructor will then be globally available.
```
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.

Quickstart

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.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autocomplete Demo</title>
    <!-- Assuming autocomplete.min.js is in the same directory -->
    <script src="autocomplete.min.js"></script>
    <style>
        .autocomplete-suggestions {
            border: 1px solid #999;
            background: #FFF;
            overflow: auto;
            max-height: 150px;
        }
        .autocomplete-suggestion {
            padding: 2px 5px;
            white-space: nowrap;
            overflow: hidden;
            cursor: pointer;
        }
        .autocomplete-selected {
            background: #F0F0F0;
        }
        .autocomplete-suggestions strong {
            font-weight: normal;
            color: #3399FF;
        }
    </style>
</head>
<body>
    <h1>Search for fruits:</h1>
    <input type="text" id="my-input" placeholder="Start typing...">

    <script>
        new autoComplete({
            selector: '#my-input',
            minChars: 1,
            source: function(term, suggest){
                term = term.toLowerCase();
                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'];
                const matches = [];
                for (let i=0; i<choices.length; i++)
                    if (~choices[i].toLowerCase().indexOf(term)) matches.push(choices[i]);
                suggest(matches);
            }
        });
    </script>
</body>
</html>

view raw JSON →