{"id":23628564,"url":"https://github.com/null-none/bootstrap5-autocomplete","last_synced_at":"2026-04-13T01:38:28.492Z","repository":{"id":269071545,"uuid":"906334548","full_name":"null-none/bootstrap5-autocomplete","owner":"null-none","description":"Autocomplete for Bootstrap v5 ","archived":false,"fork":false,"pushed_at":"2025-01-21T13:56:51.000Z","size":10,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-21T14:39:25.574Z","etag":null,"topics":["autocomplete","bootstrap","bootstrap5","javascript"],"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/null-none.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2024-12-20T17:03:43.000Z","updated_at":"2025-01-21T13:56:54.000Z","dependencies_parsed_at":"2024-12-20T18:24:18.538Z","dependency_job_id":"77165434-e3f7-498f-980a-6c58405f2b31","html_url":"https://github.com/null-none/bootstrap5-autocomplete","commit_stats":null,"previous_names":["null-none/bootstrap5-autocomplete"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/null-none%2Fbootstrap5-autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/null-none%2Fbootstrap5-autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/null-none%2Fbootstrap5-autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/null-none%2Fbootstrap5-autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/null-none","download_url":"https://codeload.github.com/null-none/bootstrap5-autocomplete/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239543547,"owners_count":19656374,"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","javascript"],"created_at":"2024-12-28T00:46:26.171Z","updated_at":"2026-04-13T01:38:28.456Z","avatar_url":"https://github.com/null-none.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# autocomplete-bootstrap\n\n### Install\n\n```bash\nnpm install autocomplete-bootstrap\n```\n\n### Usage\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n    \u003clink href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65\" crossorigin=\"anonymous\"\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n    \u003cscript src=\"autocomplete.js\" \u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\n```javascript\nconst autocomplete = new Autocomplete(field, {\n    data: [{label: \"Option 1\", value: 1}],\n    maximumItems: 5,\n    onSelectItem: ({label, value}) =\u003e {\n        console.log(label, value);\n    }\n});\n\nautocomplete.setData([\n    {label: \"Option 2\", value: 2},\n    {label: \"Option 3\", value: 3},\n]);\n```\n\n\n### Options\n\nOptions is a JSON object with the following attributes (in alphabetical order):\n\n**data**:  \nThe data from where autocomplete will lookup items to show. This data can be a simple object or an array of JSON objects. By default the format for every object in the array is as following, but you can also change the name of the label and value keys (see below):\n\n    {\"label\": \"Option 1\", \"value\": 1}\n\n**dropdownOptions**:  \nIt's the same options from Bootstrap's Dropdown, documented [here](https://getbootstrap.com/docs/5.2/components/dropdowns/#options).\n\n**dropdownClass**:  \nThe class of the dropdown-menu element, which is the box that is displayed. Can take a string or an array of strings.\n\n**highlightClass**:  \nThe class to use when highlighting typed text on items. Only used when highlightTyped is true. Default is text-primary. Can take a string or an array of strings.\n\n**highlightTyped**:  \nWhether to highlight (style) typed text on items. Default is true.\n\n**label**:  \nThe name of the `label` key in your data. The label is what will be shown on each item in the autocomplete list.\n\n**maximumItems**:  \nHow many items you want to show when the autocomplete is displayed. Default is 5. Set to 0 to display all available items.\n\n**onInput**:  \nA callback function to execute on user input.\n\n**onSelectItem**:  \nA callback that is fired every time an item is selected. It receives an object in following format:\n    \n    {label: \u003clabel\u003e, value: \u003cvalue\u003e}\n\n**showValue**:  \nIf set to true, will display the value of the entry after the label in the dropdown list.\n\n**showValueBeforeLabel**:  \nIf set to true and `showValue` also set to true, the value will be displayed before the label.\n\n**threshold**:  \nThe number of characters that need to be typed on the input in order to trigger the autocomplete. Default is 4.\n\n**value**:  \nThe name of the `value` key in your data.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnull-none%2Fbootstrap5-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnull-none%2Fbootstrap5-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnull-none%2Fbootstrap5-autocomplete/lists"}