Autocomplete Suggestions For Inputs - Bootstrap Autocomplete

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.

<!-- 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 function autocomplete on your input field and define your options in a datalist element.

<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. Prefetch 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();
});

3. Or load the 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();
});

4. You can also conditionally load data based on the value you selected 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>

$(function(){
  $('#input-condition').autocomplete();
});

5. All possible options to customize the plugin. Note that all options can be passed via data-option 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
  
});

6. 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)
  }

});

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

Changelog:

2024-07-23

• Update

---

This awesome jQuery plugin is developed by iqbalfn. For more Advanced Usages, please check the demo page or visit the official website.