js

var req;
var isIE;
var completeField;
var completeTable;
var autoRow;

function callback() {
    if (req.readyState == 4) {
        if (req.status == 200) {
            parseMessages(req.responseXML);
        } else if (req.status == 204){
            clearTable();
        }
    }
}

function init() {
    completeField = document.getElementById("complete-field");
    completeTable = document.getElementById("complete-table");
    autoRow = document.getElementById("auto-row");
    completeTable.style.top = getElementY(autoRow) + "px";
    clearTable();
}



function doCompletion() {
     if (completeField.value == "") {
        clearTable();
    } else {
        var url = "autocomplete.php?action=complete&id=" + escape(completeField.value);
        req = initRequest(url);
        req.open("GET", url, true);
        req.onreadystatechange = callback;
        req.send(null);
}

function initRequest(url) {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        isIE = true;
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}
function appendComposer(firstName,lastName,composerId) {

    var row;
    var cell;
    var linkElement;

    completeTable.style.display = 'table';
    if (isIE) {
        row = completeTable.insertRow(completeTable.rows.length);
        cell = row.insertCell(0);
    } else {
        row = document.createElement("tr");
        cell = document.createElement("td");
        row.appendChild(cell);
        completeTable.appendChild(row);
    }

    cell.className = "popupCell";

    linkElement = document.createElement("a");
    linkElement.className = "popupItem";
    linkElement.setAttribute("href", "autocomplete.php?action=lookup&id=" + composerId);
    linkElement.appendChild(document.createTextNode(firstName + " " + lastName));
    cell.appendChild(linkElement);
}

function clearTable() {
    if (completeTable) {
        completeTable.style.display = 'none';
        for (loop = completeTable.childNodes.length -1; loop >= 0 ; loop--) {
            completeTable.removeChild(completeTable.childNodes[loop]);
        }
    }
}
function getElementY(element){

    var targetTop = 0;

    if (element.offsetParent) {
        while (element.offsetParent) {
            targetTop += element.offsetTop;
            element = element.offsetParent;
        }
    } else if (element.y) {
        targetTop += element.y;
    }
    return targetTop;
}

function parseMessages(responseXML) {
    clearTable();
    var composers = responseXML.getElementsByTagName("composers")[0];
    if (composers.childNodes.length > 0) {
        completeTable.setAttribute("bordercolor", "black");
        completeTable.setAttribute("border", "1");
    } else {
        clearTable();
    }

    for (loop = 0; loop < composers.childNodes.length; loop++) {
        var composer = composers.childNodes[loop];
        var firstName = composer.getElementsByTagName("firstName")[0];
        var lastName = composer.getElementsByTagName("lastName")[0];
        var composerId = composer.getElementsByTagName("id")[0];
        appendComposer(firstName.childNodes[0].nodeValue,
                       lastName.childNodes[0].nodeValue,
                       composerId.childNodes[0].nodeValue);
    }
}