This time I will share jQuery Plugin and tutorial about Autocomplete Suggestions For Inputs – Bootstrap Autocomplete, hope it will help you in programming stack.
A full-featured autocomplete plugin for Bootstrap framework that displays suggestions in a dropdown list as users type something in your input field.
Features:
- Works with the
datalist
element.
- Loads data via AJAX requests, with prefetch support.
- Conditionally loads and filters data based on user selection.
- Allows you to preprocess the ajax response before rendering.
How to use it:
1. Import the Bootstrap Autocomplete plugin’s JavaScript into your Bootstrap project.
2 |
< link rel = "stylesheet" href = "/path/to/cdn/bootstrap.min.css" /> |
3 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
4 |
< script src = "/path/to/cdn/bootstrap.min.js" ></ script > |
6 |
< script src = "/path/to/dist/js/bootstrap-autocomplete.js" ></ script > |
2. Call the function autocomplete
on your input field and define your options in a datalist
element.
1 |
< input type = "text" class = "form-control" placeholder = "Type Something..." list = "list-example" id = "example" > |
2 |
< datalist id = "list-example" > |
3 |
< option >Option 1</ option > |
4 |
< option >Option 2</ option > |
5 |
< option >Option 3</ option > |
6 |
< option >Option 4</ option > |
7 |
< option >Option 5</ option > |
2 |
$( '#example' ).autocomplete(); |
3. Prefetch data from an external data source via AJAX requests.
1 |
< input type = "text" class = "form-control" placeholder = "Type Something..." id = "input-prefetch" data-prefetch = "data.json" > |
2 |
$( '#input-prefetch' ).autocomplete(); |
3. Or load the data only when the user types in the input field. Good for performance.
1 |
< input type = "text" class = "form-control" placeholder = "Type Something..." id = "input-filter" data-filter = "data.json" > |
2 |
$( '#input-filter' ).autocomplete(); |
4. You can also conditionally load data based on the value you selected in another form element.
1 |
< select class = "custom-select" id = "input-continent" > |
2 |
< option value = "Africa" >Africa</ option > |
3 |
< option value = "America" >America</ option > |
4 |
< option value = "Asia" >Asia</ option > |
8 |
< input type = "text" class = "form-control" placeholder = "Type Something..." id = "input-condition" data-filter-relation = "{" group":"#input-continent"}" data-filter = "/path/to/datasrouce/?q=#QUERY#" > |
2 |
$( '#input-condition' ).autocomplete(); |
5. All possible options to customize the plugin. Note that all options can be passed via data-option
attributes.
01 |
$( '#input-filter' ).autocomplete({ |
6. Callback functions.
01 |
$( '#input-filter' ).autocomplete({ |
04 |
console.log( 'Selected Option: ' , item) |
07 |
onItemRendered(el, item) { |
08 |
console.log( 'Rendered Options: ' , item) |
7. Event handlers.
1 |
$( '#input-example' ).on( 'pick.bs.autocomplete' , function (el, item){ |
3 |
console.log( 'event' , item) |
6 |
$( '#input-example' ).on(
|