Easy Autocomplete Management With jQuery - kompleter

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.