{"id":13475360,"url":"https://github.com/denis-taran/autocomplete","last_synced_at":"2025-04-08T12:00:16.722Z","repository":{"id":14561580,"uuid":"76724522","full_name":"denis-taran/autocomplete","owner":"denis-taran","description":"Blazing fast and lightweight autocomplete widget without dependencies. Only 1KB gzipped. Demo:","archived":false,"fork":false,"pushed_at":"2025-01-30T07:10:05.000Z","size":657,"stargazers_count":463,"open_issues_count":7,"forks_count":85,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-01T11:18:58.951Z","etag":null,"topics":["autocomplete","component","dropdown","input","javascript","suggestions","typeahead","typescript","vanilla-js","widget"],"latest_commit_sha":null,"homepage":"https://smartscheduling.com/en/documentation/autocomplete","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/denis-taran.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-17T13:05:32.000Z","updated_at":"2025-03-19T01:47:24.000Z","dependencies_parsed_at":"2023-01-16T20:45:13.176Z","dependency_job_id":"8ce4e082-32d1-47d9-9b3b-edc6eeea722f","html_url":"https://github.com/denis-taran/autocomplete","commit_stats":{"total_commits":195,"total_committers":17,"mean_commits":"11.470588235294118","dds":0.3589743589743589,"last_synced_commit":"ef1372a22501f2f11ef2851f42ccff3c7ecb71cc"},"previous_names":["denis-taran/autocomplete","kraaden/autocomplete"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denis-taran%2Fautocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denis-taran%2Fautocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denis-taran%2Fautocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denis-taran%2Fautocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/denis-taran","download_url":"https://codeload.github.com/denis-taran/autocomplete/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247838388,"owners_count":21004576,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["autocomplete","component","dropdown","input","javascript","suggestions","typeahead","typescript","vanilla-js","widget"],"created_at":"2024-07-31T16:01:19.745Z","updated_at":"2025-04-08T12:00:16.593Z","avatar_url":"https://github.com/denis-taran.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Uncategorized"],"sub_categories":["Uncategorized"],"readme":"Blazing fast and lightweight autocomplete widget without dependencies. Only 1KB gzipped.\n\nDemo: https://smartscheduling.com/en/documentation/autocomplete\n\n## Installation\n\nIf you want to use the library in a browser, just include `autocomplete.js` and `autocomplete.css` in your HTML file.\n\nFor `node.js`:\n\n```console\nnpm install autocompleter\n```\n\nThen import it into your JavaScript code:\n\n```javascript\nimport autocomplete from \"autocompleter\";\n// or\nvar autocomplete = require(\"autocompleter\");\n```\n\n## Getting Started\n\n```javascript\nvar countries = [\n  { label: \"United Kingdom\", value: \"UK\" },\n  { label: \"United States\", value: \"US\" },\n];\n\nvar input = document.getElementById(\"country\");\n\nautocomplete({\n  input: input,\n  fetch: function (text, update) {\n    text = text.toLowerCase();\n    // you can also use AJAX requests instead of preloaded data\n    var suggestions = countries.filter((n) =\u003e\n      n.label.toLowerCase().startsWith(text)\n    );\n    update(suggestions);\n  },\n  onSelect: function (item) {\n    input.value = item.label;\n  },\n});\n```\n\n[Try online](https://jsbin.com/tuvijarero/edit?html,js,output)\n\n## Use with Typescript and Webpack\n\nSimply import the autocompleter in your TypeScript file:\n\n```javascript\nimport autocomplete from \"autocompleter\";\n```\n\nThen call the `autocomplete` function as shown below:\n\n```javascript\n// replace the `MyInterface` interface with the interface you want to use with autocomplete\nautocomplete\u003cMyInterface\u003e({\n    input: document.getElementById('myinputfield'),\n    emptyMsg: 'No items found',\n    minLength: 1,\n    fetch: (text: string, update: (items: MyInterface[]) =\u003e void) =\u003e {\n\t...\n    },\n    onSelect: (item: MyInterface) =\u003e {\n\t...\n    }\n});\n```\n\nIf your custom interface lacks the `label` property, TypeScript may produce a compilation error. To avoid this, use an additional type:\n\n```javascript\nimport autocomplete, { AutocompleteItem } from 'autocompleter';\n\n// this type will prevent typescript warnings\ntype MyItem = Item \u0026 AutocompleteItem;\n\nautocomplete\u003cMyItem\u003e({\n    input: document.getElementById('myinputfield'),\n    emptyMsg: 'No items found',\n    minLength: 1,\n    fetch: (text: string, update: (items: Item[]) =\u003e void) =\u003e {\n\t...\n    },\n    onSelect: (item: Item) =\u003e {\n\t...\n    },\n    render: function(item: Item, currentValue: string): HTMLDivElement | undefined {\n        const itemElement = document.createElement('div');\n        itemElement.textContent = item.FirstName;\n        return itemElement;\n    }\n});\n```\n\nIf your interface lacks a `label` property, you must provide a custom render function.\n\n## Options\n\nYou can pass the following options to `autocomplete`:\n\n| Parameter           | Description                                                                                                                                                                                                                                                                                                                                                                            | Default     |\n| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `onSelect`          | This method will be called when user choose an item in autocomplete. The selected item will be passed as first parameter.                                                                                                                                                                                                                                                              | `-`         |\n| `input`             | DOM input element must be passed with this parameter and autocomplete will attach itself to this field. Selectors are not supported, but you can just use `document.querySelector('...')` to find the required element.                                                                                                                                                                | `-`         |\n| `minLength`         | Specify the minimum length, when autocomplete should appear on the screen.                                                                                                                                                                                                                                                                                                             | `2`         |\n| `emptyMsg`          | The message that will be showed when there are no suggestions that match the entered value.                                                                                                                                                                                                                                                                                            | `undefined` |\n| `render`            | This method allows you to override the rendering function. It will be called for each suggestion and the suggestion object will be passed as first parameter. The current input field value will be passed as second parameter. This function must return a DIV element or `undefined` to skip rendering.                                                                              | `undefined` |\n| `renderGroup`       | The same as `render`, but will be called for each group. The first parameter of the function will be the group name. The current input field value will be passed as second parameter. This function must return a `DIV` element or `undefined` to skip rendering.                                                                                                                     | `undefined` |\n| `className`         | The autocomplete container will have this class name if specified.                                                                                                                                                                                                                                                                                                                     | `undefined` |\n| `fetch`             | This method will be called to prepare suggestions and then pass them to autocomplete. The first parameter is the text in the input field. The second parameter is a callback function that must be called after suggestions are prepared with an array as parameter. If you pass `false` to the callback function, autocomplete will show previous suggestions and will not re-render. | `-`         |\n| `debounceWaitMs`    | Enforces that the `fetch` function will only be called once within the specified time frame (in milliseconds) and delays execution. This prevents flooding your server with AJAX requests.                                                                                                                                                                                             | `0`         |\n| `customize`         | Callback for additional autocomplete customization after rendering is finished. Use this function if you want to change autocomplete default position.                                                                                                                                                                                                                                 | `undefined` |\n| `preventSubmit`     | This option controls form submission when the ENTER key is pressed in a input field. Three settings are available: `Never`, `Always`, and `OnSelect`. Choose the appropriate setting to customize form submission behavior as per your needs.                                                                                                                                          | `Never`     |\n| `showOnFocus`       | Displays suggestions on focus of the input element. Note that if `true`, the minLength property will be ignored and it will always call `fetch`.                                                                                                                                                                                                                                       | `false`     |\n| `disableAutoSelect` | Prevents the first item in the list from being selected automatically. This option allows you to submit a custom text by pressing `ENTER` even when autocomplete is displayed.                                                                                                                                                                                                         | `false`     |\n| `container`         | Provide your own container for the widget. If not specified, a new DIV element will be created.                                                                                                                                                                                                                                                                                        | `undefined` |\n| `click`             | Allows to display autocomplete on mouse clicks or perform some additional actions.                                                                                                                                                                                                                                                                                                     | `undefined` |\n| `keyup`             | Allows to display autocomplete when a key is pressed that doesn't modify the content.                                                                                                                                                                                                                                                                                                  | see code    |\n\n### Sample config using all options\n\n```javascript\nautocomplete({\n    onSelect: function(item, input) {\n        alert(item.value);\n    },\n    input: document.getElementById('myinput'),\n    minLength: 2,\n    emptyMsg: 'No elements found',\n    render: function(item, currentValue) {\n        var div = document.createElement('div');\n        div.textContent = item.label;\n        return div;\n    },\n    renderGroup: function(groupName, currentValue) {\n        var div = document.createElement('div');\n        div.textContent = groupName;\n        return div;\n    },\n    className: 'autocomplete-customizations',\n    fetch: function(text, callback, trigger, cursorPos) {\n        text = text.toLowerCase();\n        var suggestions = [{ label: 'United States', value: 'US' }];\n        callback(suggestions);\n    },\n    debounceWaitMs: 200,\n    customize: function(input, inputRect, container, maxHeight) {\n        ...\n    },\n    preventSubmit: PreventSubmit.Always,\n    disableAutoSelect: true,\n    container: document.createElement('div'),\n    click: e =\u003e e.fetch(),\n    keyup: e =\u003e e.fetch()\n});\n```\n\n### Display autocomplete above the input field\n\nYou can use the following snippet to display autocomplete above the input field if there is not enough space for it.\n\n```typescript\nautocomplete({\n    ...,\n    customize: function(input, inputRect, container, maxHeight) {\n        if (maxHeight \u003c 100) {\n            container.style.top = '';\n            container.style.bottom = (window.innerHeight - inputRect.bottom + input.offsetHeight) + 'px';\n            container.style.maxHeight = '200px';\n        }\n    }\n});\n```\n\nIf you don't want to pass this function every time, you can also use spread operator to create your own autocomplete version with default implementation:\n\n```typescript\nexport default function autocompleteCustomized\u003cT extends AutocompleteItem\u003e(\n  settings: AutocompleteSettings\u003cT\u003e\n): AutocompleteResult {\n  return autocomplete({\n    ...settings,\n    customize: (\n      input: HTMLInputElement,\n      inputRect: ClientRect | DOMRect,\n      container: HTMLDivElement,\n      maxHeight: number\n    ): void =\u003e {\n      if (maxHeight \u003c 100) {\n        container.style.top = \"\";\n        container.style.bottom =\n          window.innerHeight - inputRect.bottom + input.offsetHeight + \"px\";\n        container.style.maxHeight = \"200px\";\n      }\n    },\n  });\n}\n```\n\n### Unload autocomplete\n\nYou can call `destroy` method on the returned object in order to remove event handlers and DOM elements after usage:\n\n```javascript\nvar autocompl = autocomplete({\n  /* options */\n});\nautocompl.destroy();\n```\n\n## Grouping suggestions\n\nYou can display suggestions separated into one or multiple groups/categories:\n\n```javascript\nvar countries = [\n  { label: \"Canada\", value: \"CA\", group: \"North America\" },\n  { label: \"United States\", value: \"US\", group: \"North America\" },\n  { label: \"Uzbekistan\", value: \"UZ\", group: \"Asia\" },\n];\n\nautocomplete({\n  minLength: 1,\n  input: document.getElementById(\"country\"),\n  fetch: function (text, update) {\n    text = text.toLowerCase();\n    var suggestions = countries.filter((n) =\u003e\n      n.label.toLowerCase().startsWith(text)\n    );\n    update(suggestions);\n  },\n  onSelect: function (item) {\n    alert(item.value);\n  },\n});\n```\n\n[Try online](https://jsbin.com/yekozasoza/edit?html,js,output)\n\nNote: Please make sure that all items are sorted by the group property.\n\n## Display autocomplete when textbox is clicked by a mouse\n\nThe widget offers the ability to display an autocomplete when a user clicks on words or placeholders within a textbox:\n\n```typescript\nfunction getWord(s, pos) {\n    const n = s.substring(pos).match(/^[a-zA-Z0-9-_]+/)\n    const p = s.substring(0, pos).match(/[a-zA-Z0-9-_]+$/)\n    if (!p \u0026\u0026 !n) return ''\n    return (p || '') + (n || '')\n}\nautocomplete({\n    ...,\n    fetch: function(text, update) {\n        text = getWord(text, input.selectionStart).toLowerCase();\n        var suggestions = countries.filter(n =\u003e n.label.toLowerCase().startsWith(text))\n        update(suggestions);\n    },\n    click: e =\u003e e.fetch()\n});\n```\n\n[Try online](https://jsbin.com/fololajava/edit?html,js,output)\n\n## Using the Library in a Pure JavaScript Environment\n\nIf you're using this library in a pure JavaScript environment, note that TypeScript enums are transpiled into numeric values. As a result, named enum values are replaced with their corresponding numbers. When calling functions that expect enum values, make sure to pass the correct numeric value instead of the enum name.\n\n## License\n\nAutocomplete is released under the MIT License.\n\nCopyright (c) 2016 - Denis Taran\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdenis-taran%2Fautocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdenis-taran%2Fautocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdenis-taran%2Fautocomplete/lists"}