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.

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.


  • 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

Post NameBootstrap 4 Input Autocomplete
Author Nameiqbalfn
CategoryAJAX, Autocomplete, Bootstrap
Official PageClick Here
Publish DateFebruary 15, 2021
Last UpdateAugust 30, 2023
DownloadLink Below

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>

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

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

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>

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

6. All possible options for customizing the plugin.


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


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


8. Event Handlers.

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

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


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

liststringnullThe id of datalist element to take the option from.
prefetchstringnullTarget URL to fetch for all enable options on the first init.
filterstringnullTarget URL to fetch the filtered result, the string #QUERY# will be replaced with user input.
filterDelayint300Total microsecond to wait since last user input before triggering Ajax request.
filterMinCharsint1Total character user input to trigger Ajax request.
filterRelationobjectnullRelated element to add on request query in the form of key => selector. For example: {what: "#input-continent"}.
maxResultint10The total result is to show on the dropdown list.
onPickfunctionnullFunction to call after the user picks the dropdown item. onPick(input, item)
onItemRenderedfunctionnullFunction to call right after item element rendered. onItemRendered(input, item).
preProcessfunctionnullProcess the Ajax response to suit the response spec.


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

Event TypeDescription event fires immediately when the user selects any of the suggestions option items. event that is called right after the suggestion item is already rendered and is on view.

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.

Related Posts


Responsive Image Gallery Lightbox jQuery Plugin | VenoBox

VenoBox is a responsive jQuery modal window plugin suitable for images, embedded content, iFrames, Google Maps, Vimeo, and YouTube videos. The big difference compared to many other…


[Animation] Bootstrap Multi-Level Responsive Dropdown Menu

Bootstrap-based multi-level dropdown navigation menu with cool animations. The dropdown on Hover is a jQuery plugin used to create Bootstrap multi-level scroll-triggered dropdown menus with CSS3 animations…


Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…


HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Leave a Reply

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