Dynamic Autocomplete Dropdown For Bootstrap - jQuery Autocomplete.js

This is a lightweight jQuery plugin which applies a fast and dynamic autocomplete functionality to an input field styling with the Bootstrap framework.

More features:

• Item filtering.
• Item validation.
• AJAX data fetching.
• Callback functions.
• Config via data attributes.

How to use it:

1. Load the Bootstrap's stylesheet and Font Awesome iconic font in the head section of the document.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<link rel="stylesheet" href="/path/to/font-awesome.min.css">

2. Load jQuery library and the jQuery Autocomplete.js script at the end of the document.

<script src="/path/to/jquery.min.js"></script>
<script src="dist/autocomplete.js"></script>

3. Create a regular input field on the webpage.

<input type="text" class="demo">

4. Create a hidden input field to accept the value selected by users.

<input type="hidden" id="hidden-field">

5. Define your data souce for the autocomplete. The data source can be either an Array or an URL.

const myData = [{
        "id": 1,
        "name": 'Item 1',
        "ignore": false
      },{
        "id": 2,
        "name": 'Item 2',
        "ignore": false
      },{
        "id": 3,
        "name": 'Item 3',
        "ignore": false
      },
      // ...
]

6. Call the function to enable the autocomplete functionality on the input field.

$('.demo').autocomplete({
  nameProperty: 'name',
  valueField: '#hidden-field',
  dataSource: myData
});

7. All possible plugin options.

$('.demo').autocomplete({

  // name property
  nameProperty: 'name',

  // value property
  valueProperty: 'value',

  // selector or element
  valueField: null,

  // data source
  dataSource: null,

  // item filter
  filter: function (input, data) {
    return data.filter(x => ~x[this.options.nameProperty].toLowerCase().indexOf(input.toLowerCase()));
  },

  // trigger event
  filterOn: 'input',

  // called when the input is clicked
  openOnInput: true,

  // function(li, item)
  preAppendDataItem: null,

  // function(input, data) { ... }
  validation: null,

  // auto select the first matched item
  selectFirstMatch: false,

  // trigger element
  validateOn: 'blur',

  // called when selected
  onSelected: null,

  // class for invalid
  invalidClass: 'invalid',

  // triggered as soon as the initial value is selected
  initialValueSelectedEvent: 'initial-value-selected.autocomplete',

  // append to the body element
  appendToBody: false,

  // if true the dropdown will only show unique values. 
  distinct: false
  
});

Changelog:

2018-08-14

• Fix selection of distinct values when distinct is set to true.

v1.1.0 (2018-05-29)

• Added the option to only show unique dropdown items.

2018-04-20

• minor performance optimization for when there are a lot of elements in the dropdown
• dropdown items are appended to the dom in batches

---

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