Dynamic Autocomplete Dropdown For Bootstrap - jQuery Autocomplete.js
File Size: | 29.1 KB |
---|---|
Views Total: | 75148 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.