{"id":14062827,"url":"https://github.com/lekoala/bootstrap5-autocomplete","last_synced_at":"2026-01-17T07:41:19.425Z","repository":{"id":62646883,"uuid":"561375094","full_name":"lekoala/bootstrap5-autocomplete","owner":"lekoala","description":"Autocomplete for Bootstrap 5 (and 4!)","archived":false,"fork":false,"pushed_at":"2025-03-12T09:08:01.000Z","size":514,"stargazers_count":96,"open_issues_count":2,"forks_count":21,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-31T20:05:17.498Z","etag":null,"topics":["autocomplete","bootstrap","bootstrap5","es6"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lekoala.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"github":"lekoala"}},"created_at":"2022-11-03T14:55:26.000Z","updated_at":"2025-03-19T08:27:31.000Z","dependencies_parsed_at":"2024-12-28T20:02:49.234Z","dependency_job_id":"2f158f09-aa05-47d4-8ac0-a6a0779ea228","html_url":"https://github.com/lekoala/bootstrap5-autocomplete","commit_stats":{"total_commits":49,"total_committers":2,"mean_commits":24.5,"dds":0.04081632653061229,"last_synced_commit":"f92e9152baf126dd6e3c0484d7daa0d328cc1451"},"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lekoala%2Fbootstrap5-autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lekoala%2Fbootstrap5-autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lekoala%2Fbootstrap5-autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lekoala%2Fbootstrap5-autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lekoala","download_url":"https://codeload.github.com/lekoala/bootstrap5-autocomplete/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247730068,"owners_count":20986404,"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","bootstrap","bootstrap5","es6"],"created_at":"2024-08-13T07:02:30.539Z","updated_at":"2026-01-17T07:41:19.412Z","avatar_url":"https://github.com/lekoala.png","language":"JavaScript","funding_links":["https://github.com/sponsors/lekoala"],"categories":["JavaScript"],"sub_categories":[],"readme":"# Autocomplete for Bootstrap 4/5\n\n[![NPM](https://img.shields.io/npm/v/bootstrap5-autocomplete.svg)](https://www.npmjs.com/package/bootstrap5-autocomplete)\n[![Downloads](https://img.shields.io/npm/dt/bootstrap5-autocomplete.svg)](https://www.npmjs.com/package/bootstrap5-autocomplete)\n\n## How to use\n\nAn ES6 autocomplete for your `input` using standards Bootstrap 5 (and 4) styles.\n\nNo additional CSS needed!\n\n```js\nimport Autocomplete from \"./autocomplete.js\";\nAutocomplete.init();\n```\n\nWhen using NPM package:\n```js\nimport Autocomplete from \"bootstrap5-autocomplete\";\nAutocomplete.init();\n```\n\nWhen using CDN version from TypeScript file, for example:\n\n```ts\nimport Autocomplete, { type Config } from \"https://cdn.jsdelivr.net/gh/lekoala/bootstrap5-autocomplete@master/autocomplete.js\";\n\nconst options: Partial\u003cConfig\u003e = {\n    //...\n}\nAutocomplete.init('#myInput', options);\n```\n\nPath mapping in `tsconfig.json` is required in order to load types from local NPM package:\n\n```json\n{\n    \"compilerOptions\": {\n        //...\n        \"paths\": {\n            \"https://cdn.jsdelivr.net/gh/lekoala/bootstrap5-autocomplete@master/autocomplete.js\": [ \"./node_modules/bootstrap5-autocomplete\" ]\n        }\n    }\n}\n```\n\n## Server side support\n\nYou can also use options provided by the server. This script expects a JSON response with the following structure:\n\n```json\n{\n    \"optionValue1\":\"optionLabel1\",\n    \"optionValue2\":\"optionLabel2\",\n    ...\n}\n```\n\nor\n\n```json\n[\n  {\n    \"value\": \"server1\",\n    \"label\": \"Server 1\"\n  },\n  ...\n]\n```\n\nSimply set `data-server` where your endpoint is located. The suggestions will be populated upon init except if `data-live-server` is set, in which case, it will be populated on type. A ?query= parameter is passed along with the current value of the searchInput.\n\nData can be nested in the response under the data key (configurable with serverDataKey).\n\n## Options\n\nOptions can be either passed to the constructor (eg: optionName) or in data-option-name format.\n\n| Name                       | Type                                           | Description                                                                                             |\n|----------------------------|------------------------------------------------|---------------------------------------------------------------------------------------------------------|\n| showAllSuggestions         | \u003ccode\u003eBoolean\u003c/code\u003e                           | Show all suggestions even if they don't match                                                           |\n| suggestionsThreshold       | \u003ccode\u003eNumber\u003c/code\u003e                            | Number of chars required to show suggestions                                                            |\n| maximumItems               | \u003ccode\u003eNumber\u003c/code\u003e                            | Maximum number of items to display                                                                      |\n| autoselectFirst            | \u003ccode\u003eBoolean\u003c/code\u003e                           | Always select the first item                                                                            |\n| ignoreEnter                | \u003ccode\u003eBoolean\u003c/code\u003e                           | Ignore enter if no items are selected (play nicely with autoselectFirst=0)                              |\n| tabSelect                  | \u003ccode\u003eBoolean\u003c/code\u003e                           | Tab will trigger selection if active                                                                    |\n| updateOnSelect             | \u003ccode\u003eBoolean\u003c/code\u003e                           | Update input value on selection (doesn't play nice with autoselectFirst)                                |\n| highlightTyped             | \u003ccode\u003eBoolean\u003c/code\u003e                           | Highlight matched part of the label                                                                     |\n| highlightClass             | \u003ccode\u003eString\u003c/code\u003e                            | Class added to the mark label                                                                           |\n| fullWidth                  | \u003ccode\u003eBoolean\u003c/code\u003e                           | Match the width on the input field                                                                      |\n| fixed                      | \u003ccode\u003eBoolean\u003c/code\u003e                           | Use fixed positioning (solve overflow or complex layout issues)                                         |\n| fuzzy                      | \u003ccode\u003eBoolean\u003c/code\u003e                           | Fuzzy search                                                                                            |\n| startsWith                 | \u003ccode\u003eBoolean\u003c/code\u003e                           | Must start with the string. Defaults to false (it matches any position).                                |\n| fillIn                     | \u003ccode\u003eBoolean\u003c/code\u003e                           | Show fill in icon.                                                                                      |\n| preventBrowserAutocomplete | \u003ccode\u003eBoolean\u003c/code\u003e                           | Additional measures to prevent browser autocomplete                                                     |\n| itemClass                  | \u003ccode\u003eString\u003c/code\u003e                            | Applied to the dropdown item. Accepts space separated classes.                                          |\n| activeClasses              | \u003ccode\u003eArray\u003c/code\u003e                             | By default: [\"bg-primary\", \"text-white\"]                                                                |\n| labelField                 | \u003ccode\u003eString\u003c/code\u003e                            | Key for the label                                                                                       |\n| valueField                 | \u003ccode\u003eString\u003c/code\u003e                            | Key for the value                                                                                       |\n| searchFields               | \u003ccode\u003eArray\u003c/code\u003e                             | Key for the search                                                                                      |\n| queryParam                 | \u003ccode\u003eString\u003c/code\u003e                            | Key for the query parameter for server                                                                  |\n| items                      | \u003ccode\u003eArray\u003c/code\u003e \\| \u003ccode\u003eObject\u003c/code\u003e      | An array of label/value objects or an object with key/values                                            |\n| source                     | \u003ccode\u003efunction\u003c/code\u003e                          | A function that provides the list of items                                                              |\n| hiddenInput                | \u003ccode\u003eBoolean\u003c/code\u003e                           | Create an hidden input which stores the valueField                                                      |\n| hiddenValue                | \u003ccode\u003eString\u003c/code\u003e                            | Populate the initial hidden value. Mostly useful with liveServer.                                       |\n| clearControl               | \u003ccode\u003eString\u003c/code\u003e                            | Selector that will clear the input on click.                                                            |\n| datalist                   | \u003ccode\u003eString\u003c/code\u003e                            | The id of the source datalist                                                                           |\n| server                     | \u003ccode\u003eString\u003c/code\u003e                            | Endpoint for data provider                                                                              |\n| serverMethod               | \u003ccode\u003eString\u003c/code\u003e                            | HTTP request method for data provider, default is GET                                                   |\n| serverParams               | \u003ccode\u003eString\u003c/code\u003e \\| \u003ccode\u003eObject\u003c/code\u003e     | Parameters to pass along to the server. You can specify a \"related\" key with the id of a related field. |\n| serverDataKey              | \u003ccode\u003eString\u003c/code\u003e                            | By default: data                                                                                        |\n| fetchOptions               | \u003ccode\u003eObject\u003c/code\u003e                            | Any other fetch options (https://developer.mozilla.org/en-US/docs/Web/API/fetch#syntax)                 |\n| liveServer                 | \u003ccode\u003eBoolean\u003c/code\u003e                           | Should the endpoint be called each time on input                                                        |\n| noCache                    | \u003ccode\u003eBoolean\u003c/code\u003e                           | Prevent caching by appending a timestamp                                                                |\n| debounceTime               | \u003ccode\u003eNumber\u003c/code\u003e                            | Debounce time for live server                                                                           |\n| notFoundMessage            | \u003ccode\u003eString\u003c/code\u003e                            | Display a no suggestions found message. Leave empty to disable                                          |\n| onRenderItem               | [\u003ccode\u003eRenderCallback\u003c/code\u003e](#RenderCallback) | Callback function that returns the label                                                                |\n| onSelectItem               | [\u003ccode\u003eItemCallback\u003c/code\u003e](#ItemCallback)     | Callback function to call on selection                                                                  |\n| onClearItem                | [\u003ccode\u003eValueCallback\u003c/code\u003e](#ValueCallback)   | Callback function to call on clear                                                                      |\n| onServerResponse           | [\u003ccode\u003eServerCallback\u003c/code\u003e](#ServerCallback) | Callback function to process server response. Must return a Promise                                     |\n| onServerError              | [\u003ccode\u003eErrorCallback\u003c/code\u003e](#ErrorCallback)   | Callback function to process server errors.                                                             |\n| onChange                   | [\u003ccode\u003eItemCallback\u003c/code\u003e](#ItemCallback)     | Callback function to call on change-event. Returns currently selected item if any                       |\n| onBeforeFetch              | [\u003ccode\u003eFetchCallback\u003c/code\u003e](#FetchCallback)   | Callback function before fetch                                                                          |\n| onAfterFetch               | [\u003ccode\u003eFetchCallback\u003c/code\u003e](#FetchCallback)   | Callback function after fetch                                                                           |\n\n## Callbacks\n\n### RenderCallback ⇒ \u003ccode\u003estring\u003c/code\u003e\n\n| Param | Type                                       |\n|-------|--------------------------------------------|\n| item  | \u003ccode\u003eObject\u003c/code\u003e                        |\n| label | \u003ccode\u003eString\u003c/code\u003e                        |\n| inst  | [\u003ccode\u003eAutocomplete\u003c/code\u003e](#Autocomplete) |\n\n\u003ca name=\"ItemCallback\"\u003e\u003c/a\u003e\n\n### ItemCallback ⇒ \u003ccode\u003evoid\u003c/code\u003e\n\n| Param | Type                                       |\n|-------|--------------------------------------------|\n| item  | \u003ccode\u003eObject\u003c/code\u003e                        |\n| inst  | [\u003ccode\u003eAutocomplete\u003c/code\u003e](#Autocomplete) |\n\n\u003ca name=\"ServerCallback\"\u003e\u003c/a\u003e\n\n## ValueCallback ⇒ \u003ccode\u003evoid\u003c/code\u003e\n\n| Param | Type                                       |\n|-------|--------------------------------------------|\n| value | \u003ccode\u003eString\u003c/code\u003e                        |\n| inst  | [\u003ccode\u003eAutocomplete\u003c/code\u003e](#Autocomplete) |\n\n\u003ca name=\"ValueCallback\"\u003e\u003c/a\u003e\n\n### ServerCallback ⇒ \u003ccode\u003ePromise\u003c/code\u003e\n\n| Param    | Type                                       |\n|----------|--------------------------------------------|\n| response | \u003ccode\u003eResponse\u003c/code\u003e                      |\n| inst     | [\u003ccode\u003eAutocomplete\u003c/code\u003e](#Autocomplete) |\n\n\u003ca name=\"ErrorCallback\"\u003e\u003c/a\u003e\n\n## ErrorCallback ⇒ \u003ccode\u003evoid\u003c/code\u003e\n\n| Param  | Type                                       |\n|--------|--------------------------------------------|\n| e      | \u003ccode\u003eError\u003c/code\u003e                         |\n| signal | \u003ccode\u003eAbortSignal\u003c/code\u003e                   |\n| inst   | [\u003ccode\u003eAutocomplete\u003c/code\u003e](#Autocomplete) |\n\n## Tips\n\n- Use arrow down to show dropdown (and arrow up to hide it)\n- If you have a really long list of options, a scrollbar will be used\n- Access instance on a given element with Autocomplete.getInstance(myEl)\n- Use type=\"search\" for your inputs to get a clear icon\n- You can use a custom renderer to display images, for example:\n\n```js\n...\nlet data = [\n    {\n        \"value\": \"My value\",\n        \"label\": \"My label\",\n        \"html\": \"\u003cimg src=\\\"/images/demo.jpg\\\"\u003e\u003cspan\u003eMy label\u003c/span\u003e\"\n    }\n];\n...\nonRenderItem: function (item) {\n    return item.html;\n},\n```\n\n## Groups\n\nYou can have your items grouped by using the following syntax:\n\n```js\nconst src = [\n  {\n    group: \"My Group Name\",\n    items: [\n      {\n        value: \"...\",\n        label: \"...\",\n      },\n    ],\n  },\n];\n```\n\n## Not using Bootstrap ?\n\nThis class does NOT depends on Bootstrap JS. If you are not using Bootstrap, you can simply implement the css\nthe way you like it :-)\n\n## Demo\n\nhttps://codepen.io/lekoalabe/pen/MWXydNQ or see demo.html\n\n## Custom element\n\nYou can now use this as a custom element as part of my [Formidable Elements](https://github.com/lekoala/formidable-elements) collection.\n\n## Browser supports\n\nModern browsers (edge, chrome, firefox, safari... not IE11). [Add a warning if necessary](https://github.com/lekoala/nomodule-browser-warning.js/).\n\n## Also check out\n\n- [Bootstrap 5 Tags](https://github.com/lekoala/bootstrap5-tags): tags input for bootstrap\n- [BS Companion](https://github.com/lekoala/bs-companion): the perfect bootstrap companion\n- [Admini](https://github.com/lekoala/admini): the minimalistic bootstrap 5 admin panel\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flekoala%2Fbootstrap5-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flekoala%2Fbootstrap5-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flekoala%2Fbootstrap5-autocomplete/lists"}