Bootstrap 4 Compatible Autocomplete Plugin

A Bootstrap 4 compatible jQuery autocomplete plugin that supports both static and dynamic (response in JSON) data sources.

Supports modals + automatic zIndex

bootstrap 4 autocomplete dropdown bootstrap autocomplete, bootstrap 4 autocomplete plugin, jquery autocomplete, bootstrap 4 typeahead ajax

How to make use of it:

1. Load the minified model of the autocomplete plugin after jQuery.

<!-- Required -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Autocomplete plugin -->
<script src="autocomplete.min.js"></script>

2. Attach the autocomplete operation to an enter subject and decide the info supply as follows:

<input class="autocomplete-input" />
  // source: ['Value 1', 'Value 2', 'Value 3']
  source: [
      value: 'v1', 
      label: 'Value 1', 
      extradata: 'jQuery1' // optional
      value: 'v2', 
      label: 'Value 2', 
      extradata: 'jQuery2'
      value: 'v3', 
      label: 'Value 3', 
      extradata: 'jQuery3'
    // ...

3. Load autocomplete objects from an external information supply.

  source: '/path/to/data/',
  // or
  source: function (request, response) {
    var ajaxOpt = {url: 'data.php', data:{term: request.term}};
    $.ajax(ajaxOpt).done(function (data) {

4. Customize the dropdown template for the autocomplete checklist.

  renderMenu: function (menu, item) {
    return $('<a href="javascript: void(0)" />')
      .addClass('dropdown-item text-wrap')
      .data('data', item)
      .html(item.label || item.value)

  matcher: function (rowData, search, cb) {
    var text = (rowData.label || rowData.text || rowData.value).toUpperCase();
    if (text.indexOf(search.toUpperCase()) > -1) {
      return cb(true);


5. More plugin choices.


  // minimum number of characters to trigger the autocomplete list
  minLength: 1,

  // time to wait before displaying the autocomplete list
  delay: 300,

  // CSS z-index property
  zIndex: 100,

  // auto set focus on the first matched item
  autoFocus: false,

  // ignore keys
  ignoreKeys: Default: '|9|16|17|18|19|33|34|35|36|37|39|45|144|145|',

6. API strategies.

// Get option
$('.autocomplete-input').autocomplete('option', 'matcher');

// Set option
$('.autocomplete-input').autocomplete('option', 'matcher', false);

// Run function
$('.autocomplete-input').autocomplete('search', 'searchfor');

7. Events.

  // ...
.on('autocomplete.preselect', function (event, data, jItem) {
  // do somthing
.on('', function (event, data, jItem) {
  // do somthing


minLength: min length to start autocomplete. Default: 1

delay: Timeout before display autocomplete. Default: 300 ms

source: Source

zIndex: minimal zIndex. Default: 100

autoFocus: Autofocus first match: Default false

ignoreKeys: Default: ‘|9|16|17|18|19|33|34|35|36|37|39|45|144|145|’

renderMenu: Function to create a menu widget.

Easy Autocomplete Plugin Styled With Bootstrap, autocomplete Github, bootstrap autocomplete textbox, bootstrap 4 autocomplete ajax

See Demo And Download

Official Website(comlog-gmbh): Click Here

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

Related Posts


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…


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…


Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with Bootstrap 5, the attributes have been…


Modern Mobile Touch Slider With Acceleration Transitions | Swiper

Swiper is the most modern free mobile touch slider with accelerated device transitions and amazing original behavior. It is intended for use in mobile websites, mobile web…


[Steps] A Simple, Lightweight jQuery Step Wizard Plugin

jQuery steps wizard is a simple and lightweight plugin. The step is a jQuery plugin that turns any grouped elements into a step-by-step wizard with navigation buttons…

Leave a Reply

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