index.html

<!DOCTYPE html>
<html>
<head>
	<title>Test-Autocomplete</title>
	<style>
	/*This is responsible for every styling*/
		#tag-div .tags{
			padding-right: 10px;
			padding-left:5px;
			margin-left: 2px;
			background-color: #aaa;
			color: #fff;
			font-size: smaller; 
		}

		#list-div .list{
			cursor: pointer;
			transition:.3s;
			border:1px solid #ddd;

		}
		#list-div .list:hover{
			background-color: #a2e4b8;
			color:white;
			transition:.3s;
		}
	</style>

</head>
<body>
<form action="" id="myForm">
	<span id="tag-div"></span><input type="text" id="complete">
	<div id="list-div"></div>
</form>

</body>
<script src="autocomplete.js"></script>
<script>

//Write the config
var config = {
	inputId:'complete', /* Which input field to hook on*/
	path:"data.php",    /* Where to get data*/
	divList:"list-div", /* ID for div to list autocomplete status ( you need to create this div) */
	divListEach:"list", /* class-name for each element in autocomplete (no need to create this div)*/
	divTag:"tag-div",   /* ID of element which will contain the selected thing */
	elemClass:"tags",   /* class of every element in tagged list */
	getVar:"sent",      /* The QueryString param*/ 
	innerHTMLkey:"name" /* The object key that is to be used as innerHTML*/
}


//call the method
autocomplete.complete(config, function(data, output){
	//alert(JSON.stringify(data));
	//alert(JSON.stringify(output));
	//tada! you have the selected data and the returned JSON data to play with.
	//called on every selection made.
	var leftBox = document.getElementById(config.inputId);
	var myRect = leftBox.getBoundingClientRect();
	var divObj = document.getElementById(config.divList)
	var width = myRect.right - myRect.left;
		divObj.setAttribute('style', "position:relative !important; left:"+ (myRect.left -5)+"px !important; width:"+width+"px; !important; border-radius:6px;");


}); 

</script>
</html>