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.

Autocomplete Use Bootstrap’s javascript autocomplete plugin to display an autocomplete suggestion as the user types.

This plugin uses a dropdown plugin to be able to work properly, be sure to include it in your custom build. For the Ajax request, we use the jQuery Ajax built-in function. You should not be using jQuery’s skinny version.

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 responses before applying.

Must Read: jQuery Plugin For Height and Width Resizing Of The iFrame To Content Size

Bootstrap 4 Input Autocomplete Suggestions Details

How to make use of it:

1. Import the Bootstrap Autocomplete JavaScript plugin into your BS 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.

<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 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.

$('#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)
})

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-filter="".

Must Read: Simple Tag Input Using Typeahead Autocomplete Built With Vue.js

Events

Bootstrap autocomplete exposes a few events for hooking into suggestion functionality. All suggestions events are fired at the input element itself.

See Demo And Download

Official Website(iqbalfn): Click Here

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