Easy Autocomplete Plugin Styled With Bootstrap

A multi-functional and Bootstrap compatible autocomplete jQuery plugin that supports both static and dynamic data sources (response in json format).

How to use it:

1. Load the minified version 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 function to an input field and determine the data source (can be either Array or Object) 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 items from an exteral data source.

$('.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 list.

$('.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)
    ;
  },
})

5. Customize the matcher function. Setting to false will disable the default matcher.

$('.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);
  },

})

6. More plugin options.

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

7. API methods.

// 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');

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

---

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