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

$('.autocomplete-input').autocomplete({
  // 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.

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

4. Customize the dropdown template for the autocomplete checklist.

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

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

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

})

5. More plugin choices.

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

  // 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('show');
$('.autocomplete-input').autocomplete('search', 'searchfor');

7. Events.

$('.autocomplete-input').autocomplete({
  // ...
})
.on('autocomplete.preselect', function (event, data, jItem) {
  // do somthing
})
.on('autocomplete.select', function (event, data, jItem) {
  // do somthing
  console.info(data.value)
  console.info(data.label)
  console.info(data.extradata)
});

Options

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