{"id":31217814,"url":"https://github.com/gumbarros/bootstrapsearch","last_synced_at":"2026-03-02T10:31:30.507Z","repository":{"id":312959145,"uuid":"1049456332","full_name":"gumbarros/BootstrapSearch","owner":"gumbarros","description":"BootstrapSearch is a fork of bootstrap-5-autocomplete featuring AJAX support, local data search, multi-select, and customizable dropdowns.","archived":false,"fork":false,"pushed_at":"2025-10-07T14:29:13.000Z","size":317,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-07T16:21:49.662Z","etag":null,"topics":["ajax","autocomplete","bootstrap","bootstrap-5","search"],"latest_commit_sha":null,"homepage":"https://gumbarros.github.io/BootstrapSearch/","language":"HTML","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/gumbarros.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-03T02:25:32.000Z","updated_at":"2025-10-07T14:29:17.000Z","dependencies_parsed_at":"2025-09-10T05:08:31.236Z","dependency_job_id":null,"html_url":"https://github.com/gumbarros/BootstrapSearch","commit_stats":null,"previous_names":["gumbarros/bootstrapsearch"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gumbarros/BootstrapSearch","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gumbarros%2FBootstrapSearch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gumbarros%2FBootstrapSearch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gumbarros%2FBootstrapSearch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gumbarros%2FBootstrapSearch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gumbarros","download_url":"https://codeload.github.com/gumbarros/BootstrapSearch/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gumbarros%2FBootstrapSearch/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29998513,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-02T09:59:02.300Z","status":"ssl_error","status_checked_at":"2026-03-02T09:59:02.001Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["ajax","autocomplete","bootstrap","bootstrap-5","search"],"created_at":"2025-09-21T14:35:26.349Z","updated_at":"2026-03-02T10:31:30.452Z","avatar_url":"https://github.com/gumbarros.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cdiv class=\"d-flex justify-content-center align-items-center mb-5\"\u003e\n    \u003cimg src=\"public/logo.png\" class=\"img-responsive\" style=\"width: 150px\" alt=\"BootstrapSearch Logo\"\u003e\n    \u003ch1\u003eBootstrapSearch\u003c/h1\u003e\n\u003c/div\u003e\n\n**BootstrapSearch** is a fork of [bootstrap-5-autocomplete](https://github.com/gch1p/bootstrap-5-autocomplete) that enhances the functionality with AJAX support, customizable label/value mapping, loading and success indicators, keyboard navigation, and multi-select capabilities.\n\n---\n\n## Features\n\n* AJAX support for dynamic data fetching\n* Local data support\n* Multi-select\n* Customizable dropdown and input labels (supports HTML)\n* Keyboard navigation\n* Highlight typed text in dropdown\n\n---\n\n## Installation\n\nInclude Bootstrap 5.3 and FontAwesome in your project, then include [`bootstrap-search.js`](https://raw.githubusercontent.com/gumbarros/BootstrapSearch/refs/heads/main/public/bootstrap-search.js) at your project:\n\n```html\n\u003clink href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path/to/bootstrap-search.js\"\u003e\u003c/script\u003e\n```\n\n---\n\n## Examples\n\n### Local Data\n\n```html\n\u003cinput type=\"text\" id=\"example3\" placeholder=\"Select a dish...\" autocomplete=\"off\"\u003e\n```\n\n```js\nconst foods = [\n    { id: 1, name: \"Empanadas\", country: \"Argentina\" },\n    { id: 2, name: \"Pastel de Nata\", country: \"Portugal\" },\n    { id: 3, name: \"Pulpo a la Gallega\", country: \"Spain\" },\n    { id: 4, name: \"Completo\", country: \"Chile\" },\n    { id: 5, name: \"Tacos al Pastor\", country: \"Mexico\" },\n    { id: 6, name: \"Tapioca\", country: \"Brazil\" }\n];\n\nnew BootstrapSearch(document.getElementById('example3'), {\n    data: foods,\n    inputLabel: 'name',\n    dropdownLabel: 'name',\n    value: 'country',\n    onSelectItem: item =\u003e console.log('Selected Local:', item)\n});\n```\n\n---\n\n### AJAX Search\n\n```html\n\u003cinput type=\"text\" id=\"example1\" placeholder=\"Type a user name...\" autocomplete=\"off\"\u003e\n```\n\n```js\nnew BootstrapSearch(document.getElementById('example1'), {\n    remoteData: q =\u003e `https://dummyjson.com/users/search?q=${q}`,\n    inputLabel: 'firstName',\n    dropdownLabel: 'firstName',\n    value: 'id',\n    resolveData: res =\u003e res.users,\n    onSelectItem: item =\u003e console.log('Selected:', item)\n});\n```\n\n---\n\n### Custom Dropdown Label\n\n```html\n\u003cinput type=\"text\" id=\"example2\" placeholder=\"Type a user...\" autocomplete=\"off\"\u003e\n```\n\n```js\nnew BootstrapSearch(document.getElementById('example2'), {\n    remoteData: q =\u003e `https://dummyjson.com/users/search?q=${q}`,\n    inputLabel: item =\u003e `${item.firstName} ${item.lastName}`,\n    dropdownLabel: item =\u003e {\n        const imgUrl = `https://api.dicebear.com/9.x/pixel-art/svg?seed=${item.id}`;\n        return `\u003cdiv class=\"avatar-label\"\u003e\u003cimg src=\"${imgUrl}\" alt=\"avatar\"/\u003e${item.firstName} ${item.lastName}\u003c/div\u003e`;\n    },\n    value: item =\u003e item.id,\n    resolveData: res =\u003e res.users,\n    onSelectItem: item =\u003e console.log('Selected User:', item)\n});\n```\n\n---\n\n### Multi-Select\n\n```html\n\u003cinput type=\"text\" id=\"example4\" placeholder=\"Select users...\" autocomplete=\"off\"\u003e\n```\n\n```js\nnew BootstrapSearch(document.getElementById('example4'), {\n    remoteData: q =\u003e `https://dummyjson.com/users/search?q=${q}`,\n    inputLabel: 'firstName',\n    dropdownLabel: 'firstName',\n    value: 'id',\n    resolveData: res =\u003e res.users,\n    multiSelect: true,\n    onSelectItem: items =\u003e console.log('Selected Items:', items)\n});\n```\n## API Reference\n\n| Option               | Description                                                  | Default        |\n| -------------------- | ------------------------------------------------------------ | -------------- |\n| threshold            | Number of characters before searching                        | 2              |\n| highlightTyped       | Highlight typed text in dropdown                             | true           |\n| highlightClass       | CSS class(es) for highlight                                  | 'text-primary' |\n| inputLabel           | String key or function to set `input.value` when item selected | 'label'        |\n| dropdownLabel        | String key or function to render dropdown item (supports HTML) | 'label'        |\n| value                | String key or function to get value                            | 'value'        |\n| showValue            | Show value alongside label in dropdown                       | false          |\n| showValueBeforeLabel | Show value before label in dropdown                          | false          |\n| remoteData                 | URL string or function returning URL for AJAX request          | -              |\n| resolveData          | Function to transform AJAX response                            | -              |\n| onInput              | Callback on input change                                     | -              |\n| onSelectItem         | Callback when user selects an item                           | -              |\n| multiSelect          | Allow selecting multiple items                               | false          |\n\n\n## TODO\nHelp contributing to the library with these missing things:\n- Remove FontAwesome dependency by parametrizing icons\n- Migrate the codebase to TypeScript for type safety and split into multiple files\n- Add a build system with support for CDNs and module bundlers\n- Extend accessibility and keyboard navigation\n- Add unit tests and continuous integration\n\n## Special Thanks\nThanks to [@gch1p](https://github.com/gch1p) for the original library, without it, this would have been impossible :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgumbarros%2Fbootstrapsearch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgumbarros%2Fbootstrapsearch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgumbarros%2Fbootstrapsearch/lists"}