how to display the values in a text-box by retrieving that values from the database?

I'm doing a database project. I have a webpage where i have 5 textboxes. In one of the textboxes, when it is on focus, I should show to the user the values present in the database. I know how to retrieve using javascript and AJAX but am not able to display the retrieved values in the textbox.I tried a lot but couldn't get it.

Can anyone help me in doing this?

The code is as follows:

function showData(){ 
    var id=document.getElementById("vendor_name").value;
    var url="ftc_id.jsp";

function stateChanged(){ 
    if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ 
        var showdata = xmlHttp.responseText; 
        var strar = showdata.split(":");
            var strname = strar[1];
            document.getElementById("vendor_address").value= strar[1];
            document.getElementById("vendor_contact_no").value= strar[2];
            document.getElementById("currency").value= strar[3];
            document.getElementById("po_value_rs").value= strar[4];

display I m using the showData string as above. To autocomplete I have to make some changes here:

input type="text" id="vendor_name" name="vendor_name" onkeyup="showData();

Why are you calling showData() on onkeyup try to call function on onfocus instead of onkeyup. Other than that I cant see any error on your given code.