Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
bootstrap5-autocomplete
Advanced tools
An ES6 autocomplete for your input
using standards Bootstrap 5 (and 4) styles.
No additional CSS needed!
import Autocomplete from "./autocomplete.js";
Autocomplete.init();
You can also use options provided by the server. This script expects a JSON response with the following structure:
{
"optionValue1":"optionLabel1",
"optionValue2":"optionLabel2",
...
}
or
[
{
"value": "server1",
"label": "Server 1"
},
...
]
Simply 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.
Data can be nested in the response under the data key (configurable with serverDataKey).
Options can be either passed to the constructor (eg: optionName) or in data-option-name format.
Name | Type | Description |
---|---|---|
showAllSuggestions | Boolean | Show all suggestions even if they don't match |
suggestionsThreshold | Number | Number of chars required to show suggestions |
maximumItems | Number | Maximum number of items to display |
autoselectFirst | Boolean | Always select the first item |
ignoreEnter | Boolean | Ignore enter if no items are selected (play nicely with autoselectFirst=0) |
updateOnSelect | Boolean | Update input value on selection (doesn't play nice with autoselectFirst) |
highlightTyped | Boolean | Highlight matched part of the label |
highlightClass | String | Class added to the mark label |
fullWidth | Boolean | Match the width on the input field |
fixed | Boolean | Use fixed positioning (solve overflow issues) |
fuzzy | Boolean | Fuzzy search |
startsWith | Boolean | Must start with the string. Defaults to false (it matches any position). |
fillIn | Boolean | Show fill in icon. |
preventBrowserAutocomplete | Boolean | Additional measures to prevent browser autocomplete |
itemClass | String | Applied to the dropdown item. Accepts space separated classes. |
activeClasses | Array | By default: ["bg-primary", "text-white"] |
labelField | String | Key for the label |
valueField | String | Key for the value |
searchFields | Array | Key for the search |
queryParam | String | Key for the query parameter for server |
items | Array | Object | An array of label/value objects or an object with key/values |
source | function | A function that provides the list of items |
hiddenInput | Boolean | Create an hidden input which stores the valueField |
hiddenValue | String | Populate the initial hidden value. Mostly useful with liveServer. |
clearControl | String | Selector that will clear the input on click. |
datalist | String | The id of the source datalist |
server | String | Endpoint for data provider |
serverMethod | String | HTTP request method for data provider, default is GET |
serverParams | String | Object | Parameters to pass along to the server. You can specify a "related" key with the id of a related field. |
serverDataKey | String | By default: data |
fetchOptions | Object | Any other fetch options (https://developer.mozilla.org/en-US/docs/Web/API/fetch#syntax) |
liveServer | Boolean | Should the endpoint be called each time on input |
noCache | Boolean | Prevent caching by appending a timestamp |
debounceTime | Number | Debounce time for live server |
notFoundMessage | String | Display a no suggestions found message. Leave empty to disable |
onRenderItem | RenderCallback | Callback function that returns the label |
onSelectItem | ItemCallback | Callback function to call on selection |
onServerResponse | ServerCallback | Callback function to process server response. Must return a Promise |
onServerError | ErrorCallback | Callback function to process server errors. |
onChange | ItemCallback | Callback function to call on change-event. Returns currently selected item if any |
onBeforeFetch | FetchCallback | Callback function before fetch |
onAfterFetch | FetchCallback | Callback function after fetch |
string
Param | Type |
---|---|
item | Object |
label | String |
inst | Autocomplete |
void
Param | Type |
---|---|
item | Object |
inst | Autocomplete |
Promise
Param | Type |
---|---|
response | Response |
inst | Autocomplete |
void
Param | Type |
---|---|
e | Error |
signal | AbortSignal |
inst | Autocomplete |
You can have your items grouped by using the following syntax:
const src = [
{
group: "My Group Name",
items: [
{
value: "...",
label: "...",
},
],
},
];
This class does NOT depends on Bootstrap JS. If you are not using Bootstrap, you can simply implement the css the way you like it :-)
https://codepen.io/lekoalabe/pen/MWXydNQ or see demo.html
You can now use this as a custom element as part of my Formidable Elements collection.
Modern browsers (edge, chrome, firefox, safari... not IE11). Add a warning if necessary.
FAQs
Autocomplete for Bootstrap 5 (and 4!)
The npm package bootstrap5-autocomplete receives a total of 1,288 weekly downloads. As such, bootstrap5-autocomplete popularity was classified as popular.
We found that bootstrap5-autocomplete demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.