Press "Enter" to skip to content

Bootstrap 4 Input Autocomplete Suggestions From Data List And AJAX

Bootstrap-autocomplete is a full-featured autocomplete plugin for the Bootstrap framework that displays suggestions in a drop-down menu while users type something in the input field.

bootstrap autocomplete codepen, bootstrap autocomplete ajax, jquery autocomplete bootstrap 4, jquery autocomplete dropdown, html autocomplete from list, javascript auto fill text field

Features:

  • It works with the data element.
  • Upload data via AJAX requests, with prefetch support.
  • It conditionally loads and filters data based on the user’s choice.
  • It allows you to pre-process ajax response before applying.

How to make use of it:

1. Import the Bootstrap Autocomplete JavaScript plugin into your Bootstrap project.

<!-- jQuery & Bootstrap -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>
<!-- Bootstrap Autocomplete Plugin -->
<script src="/path/to/dist/js/bootstrap-autocomplete.js"></script>

2. Call the AutoComplete function in your input field and make your options in the data item.

<input type="text" class="form-control" placeholder="Type Something..." list="list-example" id="example">
<datalist id="list-example">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
  ...
</datalist>
$(function(){
  $('#example').autocomplete();
});

3. Pre-fetch data from an external data source via AJAX requests.

<input type="text" class="form-control" placeholder="Type Something..." id="input-prefetch" data-prefetch="data.json">
// data.json
[
  "Afghanistan", 
  "Albania",
  ...
}
$(function(){
  $('#input-prefetch').autocomplete();
});

4. Or download data only when the user types in the input field. Good for performance.

<input type="text" class="form-control" placeholder="Type Something..." id="input-filter" data-filter="data.json">
$(function(){
  $('#input-filter').autocomplete();
});

5. You can also load data conditionally based on the value you have specified in another form element.

<select class="custom-select" id="input-continent">
  <option value="Africa">Africa</option>
  <option value="America">America</option>
  <option value="Asia">Asia</option>
  ...
</select>

<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#">
</div>

6. All possible options for customizing the plugin. Note that all options can be passed through the option data attributes.

$('#input-filter').autocomplete({

  // selector of datalist 
  list: null,

  // data source to prefetch
  prefetch: null,

  // data source to load on demand
  filter: null,

  // delay in ms
  filterDelay: 300,

  // min number of characters to trigger the data loading
  filterMinChars: 1,

  // useful for conditional data loading
  filterRelation: null,

  // max number of results to display
  maxResult: 10
  
});

7. Callback functions.

$('#input-filter').autocomplete({

  onPick(el, item) {
    console.log('Selected Option: ', item)
  }
  
  onItemRendered(el, item) {
    console.log('Rendered Options: ', item)
  }
  
  preProcess(el, res) {
    console.log(res)
  }

});

8. Event Handlers.

$('#input-example').on('pick.bs.autocomplete', function(el, item){
  let item = e.item
  console.log('event', item)
})

$('#input-example').on('itemrender.bs.autocomplete', function(el, item){
  let item = e.item
  console.log('event', item)
})

Autocomplete Suggestions For Inputs, bootstrap-autocomplete Plugin/Github, bootstrap 4 autocomplete dropdown, bootstrap 4 autocomplete textbox


See Demo And Download

Official Website(iqbalfn): Click Here

This superior jQuery/javascript plugin is developed by iqbalfn. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *