Autocomplete like Google jQuery Plugin

JQuery Autocomplete plugin is a lightweight simple and easy in settings autocomplete like Google. Accents support

Local Remote

How to use autocomplete?

Insert code

add this code after </body> in your document.

<link type="text/css" rel="stylesheet" href="autocomplete.css" />                  
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="autocomplete.js"></script>

Add data for autocomplete

<script type="text/javascript">
var states = [
	'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
	'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
	'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
	'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
	'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
	'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
	'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
	'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
	'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];
</script>

Init autocomplete plugin

<script type="text/javascript">
$(function() {
	$("input").autocomplete({
		source:[states]
	}); 
});
</script>

Autocomplete from remote data

Ajax

use ajax for getting data from server

<script>
$('#remote_input').autocomplete({
	valueKey:'title',
	source:[{
		url:"/test.php?query=%QUERY%",
		type:'remote',
		getValue:function(item){
			return item.title
		},
		ajax:{
			dataType : 'jsonp'
		}
	}]
});
$('button#open').click(function(){
	$('#remote_input').trigger('updateContent open');
	$('#remote_input').focus();
});
</script>

Set source after init

Plugin has some methods for manipulate it

$('#combine').autocomplete();

$('#combine')
	.autocomplete('setSource',{
		{
			valueKey:'title',
			url:"",
			type:'remote',
			getValue:function(item){
				return item.title
			},
			ajax:{
				dataType : 'jsonp'
			}
		},
		[],
		[]
	});
	
$('#combine')
	.autocomplete('setSource',states,1)
	.autocomplete('setSource',['one','two','three','for','five','six','seven','eight','nine','zero'],2);
	
var first = $('#combine')
	.autocomplete('getSource',0);
first.url = "/test.php?query=%QUERY%&test=1",