jQuery auto-complete plugin

Installation

Obvious install with bower

    
$ bower install kompleter --save

In your HTML page, between <head> tags, import CSS code from css/kompleter.css

    
<link href="css/kompleter.css" rel="stylesheet" type="text/css" media="screen" />

Next, import JavaScript files js/jquery.min.js and js/jquery.kompleter.min.js :

    
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.kompleter.min.js"></script>

Puts the following HTML code in your page, where you will place your input, and replace data attributes values with your own values :

data-url: path to the data provider, which can be an action of controller or a JSON file. The data format returned must be JSON.
data-filter-on: the property name of JSON object on which apply filter at keyup.
data-fields: fields of JSON object to display, separated by a coma.

    
<input type="text" id="auto-complete" class="input--search" autocomplete="off" data-url="" data-filter-on="" data-fields="" />

Finally, initialize the plugin at DOM ready :

    
$(document).ready(function() {
    $('#auto-complete').kompleter({});
});

Parameter	Type	Definition	Values	Default
animation	string	Animation type used to show / hide the result set	'fade'\|'slide'\|'none'	'fade'
animationSpeed	int	Animation speed to display results	*	350
begin	boolean	Check from the begin of expression if true, on whole word if false	true\|false	true
onChar	int	Number of chars to put before request firing	*	2
maxResults	int	Number of max results to display	*	10
beforeDisplay	function	Callback fired before display result	function	function(e, dataset) { }
afterDisplay	function	Callback fired after display result	function	function(e, dataset) { }
beforeFocus	function	Callback fired before focus on one result item	function	function(e, element) { }
afterFocus	function	Callback fired after focus on one result item	function	function(e, element) { }
beforeComplete	function	Callback fired before completion of input	function	function(e, dataset, element) { }
afterComplete	function	Callback fired after completion of input	function	function(e, dataset, element) { }