{"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.","language":"javascript","status":"abandoned","last_verified":"Sun Apr 19","install":{"commands":["npm install pixabay-javascript-autocomplete"],"cli":null},"imports":["Include <script src=\"path/to/autocomplete.min.js\"></script> in your HTML. The `autoComplete` constructor will then be globally available."],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}