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="/dist/css/kompleter.min.css" rel="stylesheet"> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/dist/js/jquery.kompleter.min.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 data attributes like data-url, data-filter-on, and data-fields. <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({ // Path of script or file REQUIRED url: null,
[
add
]
[
|
|
...
]