Easy Autocomplete Management With jQuery - kompleter

File Size: | 127 KB |
---|---|
Views Total: | 1242 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
kompleter is an easy autocomplete management plugin which displays a dropdown list populated with suggestions from a data provider (e.g. JSON data) while typing.
How to use it:
1. Insert the stylesheet kompleter.css
and JavaScript kompleter.js
into the document.
<link href="css/kompleter.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script> <script src="js/jquery.kompleter.js"></script>
2. Initialize the kompleter plugin on the target input field.
<input type="text" name="autocomplete" id="autocomplete" autocomplete="off" placeholder="Enter a city name ...">
$(document).ready(function() { $('#autocomplete').kompleter(); });
3. Enable the autocomplete functionality on the input field using the following data
attributes:
- data-url: the path to the JSON data
- data-filter-on: the property name of the JSON object
- data-fields: fields of the JSON object to display
<input type="text" name="autocomplete" id="autocomplete" autocomplete="off" placeholder="Enter a city name ..." data-url="country.json" data-filter-on="Name" data-fields="Name,CountryCode,Population">
4. The example JSON data.
[{ "Name":"Kabul", "0":"Kabul", "CountryCode":"AFG", "1":"AFG", "Population":"1780000", "2":"1780000" }, // ... ]
5. The plugin comes with 2 fancy options when the autocomplete list is toggled.
$('#autocomplete').kompleter({ // Fade, slide, none animation: 'fade', // Animation speed animationSpeed: 350 });
6. More possible options
$('#autocomplete').kompleter({ // Check by string begin begin: true, // The minimum number of characters to trigger the autocomplete list onChar: 2, // The maximum number of results to display maxResults: 10 });
7. Callback functions available.
$('#autocomplete').kompleter({ beforeDisplay: function(e, dataset){}, afterDisplay: function(e, dataset){}, beforeFocus: function(e, element){}, afterFocus: function(e, element){}, beforeComplete: function(e, dataset, element){}, afterComplete: function(e, dataset, element){} });
This awesome jQuery plugin is developed by konfer-be. For more Advanced Usages, please check the demo page or visit the official website.