need help in ajax enabled auto complete feature

hello all am new to jsp servlet as well as ajax.i have written a code for the auto complete feature and
getting the correct output but my problem is that its not in proper format.

The code is as follows:
sample.jsp coding :-

<script language="javascript" type="text/javascript">
function showData(value)
{
xmlHttp=GetXmlHttpObject()
var url="servlet/getAutoSuggestData";
url=url+"?country="+value;
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
System.out.println(xmlHttp.responseText);
var showdata = xmlHttp.responseText;
document.getElementById("mydiv").innerHTML= showdata;
//document.getElementById("country").value= showdata;

}
}
function GetXmlHttpObject(){
var xmlHttp=null;
try {
xmlHttp=new XMLHttpRequest();
}
catch (e) {
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
out.println(e);
}
catch (e) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
out.println(e);
}
}
return xmlHttp;
}

</script>

input field :-
<input id="country" type="text" name="country" onkeyup="showData(this.value)"><br/>
<div id="mydiv">
</div>

I am retrieving the data from database in Vector.
My problem is I am not getting the data exactly below the text box such that I can select the field.
how do i proceed ? plz guide..Thanks .

I would recommend using a framework instead of rolling your own. the jQuery UI autocomplete feature will handle the positioning and provides a way to display the data coming from different formats. For instance, your servlet could send back streaming text, json, jsonp, etc. and jquery will handle it for you. I do this quite a bit and it's worked great for our web apps: jQuery UI - Autocomplete Demos & Documentation

thanks finally am using the same.:)