https://github.com/gumbarros/bootstrapsearch
BootstrapSearch is a fork of bootstrap-5-autocomplete featuring AJAX support, local data search, multi-select, and customizable dropdowns.
https://github.com/gumbarros/bootstrapsearch
ajax autocomplete bootstrap bootstrap-5 search
Last synced: 23 days ago
JSON representation
BootstrapSearch is a fork of bootstrap-5-autocomplete featuring AJAX support, local data search, multi-select, and customizable dropdowns.
- Host: GitHub
- URL: https://github.com/gumbarros/bootstrapsearch
- Owner: gumbarros
- License: mit
- Created: 2025-09-03T02:25:32.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-10-07T14:29:13.000Z (6 months ago)
- Last Synced: 2025-10-07T16:21:49.662Z (6 months ago)
- Topics: ajax, autocomplete, bootstrap, bootstrap-5, search
- Language: HTML
- Homepage: https://gumbarros.github.io/BootstrapSearch/
- Size: 310 KB
- Stars: 9
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
BootstrapSearch
**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.
---
## Features
* AJAX support for dynamic data fetching
* Local data support
* Multi-select
* Customizable dropdown and input labels (supports HTML)
* Keyboard navigation
* Highlight typed text in dropdown
---
## Installation
Include 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:
```html
```
---
## Examples
### Local Data
```html
```
```js
const foods = [
{ id: 1, name: "Empanadas", country: "Argentina" },
{ id: 2, name: "Pastel de Nata", country: "Portugal" },
{ id: 3, name: "Pulpo a la Gallega", country: "Spain" },
{ id: 4, name: "Completo", country: "Chile" },
{ id: 5, name: "Tacos al Pastor", country: "Mexico" },
{ id: 6, name: "Tapioca", country: "Brazil" }
];
new BootstrapSearch(document.getElementById('example3'), {
data: foods,
inputLabel: 'name',
dropdownLabel: 'name',
value: 'country',
onSelectItem: item => console.log('Selected Local:', item)
});
```
---
### AJAX Search
```html
```
```js
new BootstrapSearch(document.getElementById('example1'), {
remoteData: q => `https://dummyjson.com/users/search?q=${q}`,
inputLabel: 'firstName',
dropdownLabel: 'firstName',
value: 'id',
resolveData: res => res.users,
onSelectItem: item => console.log('Selected:', item)
});
```
---
### Custom Dropdown Label
```html
```
```js
new BootstrapSearch(document.getElementById('example2'), {
remoteData: q => `https://dummyjson.com/users/search?q=${q}`,
inputLabel: item => `${item.firstName} ${item.lastName}`,
dropdownLabel: item => {
const imgUrl = `https://api.dicebear.com/9.x/pixel-art/svg?seed=${item.id}`;
return `
${item.firstName} ${item.lastName}`;
},
value: item => item.id,
resolveData: res => res.users,
onSelectItem: item => console.log('Selected User:', item)
});
```
---
### Multi-Select
```html
```
```js
new BootstrapSearch(document.getElementById('example4'), {
remoteData: q => `https://dummyjson.com/users/search?q=${q}`,
inputLabel: 'firstName',
dropdownLabel: 'firstName',
value: 'id',
resolveData: res => res.users,
multiSelect: true,
onSelectItem: items => console.log('Selected Items:', items)
});
```
## API Reference
| Option | Description | Default |
| -------------------- | ------------------------------------------------------------ | -------------- |
| threshold | Number of characters before searching | 2 |
| highlightTyped | Highlight typed text in dropdown | true |
| highlightClass | CSS class(es) for highlight | 'text-primary' |
| inputLabel | String key or function to set `input.value` when item selected | 'label' |
| dropdownLabel | String key or function to render dropdown item (supports HTML) | 'label' |
| value | String key or function to get value | 'value' |
| showValue | Show value alongside label in dropdown | false |
| showValueBeforeLabel | Show value before label in dropdown | false |
| remoteData | URL string or function returning URL for AJAX request | - |
| resolveData | Function to transform AJAX response | - |
| onInput | Callback on input change | - |
| onSelectItem | Callback when user selects an item | - |
| multiSelect | Allow selecting multiple items | false |
## TODO
Help contributing to the library with these missing things:
- Remove FontAwesome dependency by parametrizing icons
- Migrate the codebase to TypeScript for type safety and split into multiple files
- Add a build system with support for CDNs and module bundlers
- Extend accessibility and keyboard navigation
- Add unit tests and continuous integration
## Special Thanks
Thanks to [@gch1p](https://github.com/gch1p) for the original library, without it, this would have been impossible :)