
An easy-to-use and AJAX-enabled autocomplete/typeahead jQuery plugin that works with input and select elements and is compatible with Bootstrap 4 and Bootstrap 3 frameworks.
1. Download and include the main JavaScript bootstrap-autocomplete.js
on the Bootstrap webpage.
<!-- Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <!-- Bootstrap Autocomplete --> <script src="bootstrap-autocomplete.js"></script>
2. Prepare your data for the autosuggest list: (list of strings, complex object with custom format, etc).
// input.json [ "Google Cloud Platform", "Amazon AWS", "Docker", "Digital Ocean" ] // input-object.json { "results": [ { "id": 1, "text": "Google Cloud Platform", "icon": "gcp.jpg" }, { "id": 2, "text": "Amazon AWS", "icon": "aws.jpg" }, { "id": 3, "text": "Docker", "icon": "docker.png" } ] } // list.json [ { "value": 1, "text": "Google Cloud Platform" }, { "value": 2, "text": "Amazon AWS" }, { "value": 3, "text": "Docker" } ]
3. Attach the Bootstrap Autocomplete to an input field and specify the data source as follows:
<input class="form-control basic" type="text" autocomplete="off"> <input class="form-control complex" type="text" autocomplete="off">
$('.basic').autoComplete({ resolverSettings: { url: 'input.json' } }); $('.complex').autoComplete({ resolver: 'custom', events: { search: function (qry, callback) { $.ajax( 'input-object.json', { data: { 'qry': qry} } ).done(function (res) { callback(res.results) }); } } });
4. Attach the Bootstrap Autocomplete to a select element and specify the data source as follows:
<select class="form-control select" name="simple_select" placeholder="Type to search..." data-url="list.json" autocomplete="off"> </select>
$('.select').autoComplete();
5. All possible plugin options & callback functions.
$('.select').autoComplete({ resolver: 'ajax', resolverSettings: {}, minLength: 3, valueKey: 'value', formatResult: null, autoSelect: true, noResultsText: 'No results', events: { typed: null, searchPre: null, search: null, searchPost: null, select: null, focus: null, } });
6. Event handlers.
$('.element').on('change', function (e) { console.log('change'); }); $('.element').on('autocomplete.select', function (evt, item) { console.log('item'); }); $('.element').on('autocomplete.freevalue', function (evt, value) { console.log('value'); });
This awesome jQuery plugin is developed by xcash. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 23.02.2019
- Source