Positioning an AutoCompleteExtender list in relation to its target control

To make the Auto Complete Extender display always below the Target textbox using JavaScript.

Step 1: Create a function in JavaScript as mentioned below

function resetPosition(object, args) {
    var tb = object._element;
    var tbposition = findPositionWithScrolling(tb);
    var xposition = tbposition[0];
    var yposition = tbposition[1] + 20; // 22 textbox height
    var ex = object._completionListElement;
    if (ex)
        $common.setLocation(ex, new Sys.UI.Point(xposition, yposition));
}
function findPositionWithScrolling(oElement) {
    if (typeof (oElement.offsetParent) != 'undefined') {
        var originalElement = oElement;
        for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
            posX += oElement.offsetLeft;
            posY += oElement.offsetTop;
            if (oElement != originalElement && oElement != document.body && oElement != document.documentElement) {
                posX -= oElement.scrollLeft;
                posY -= oElement.scrollTop;
            }
        }
        return [posX, posY];
    } else {
        return [oElement.x, oElement.y];
    }
}

Step 2: Add the following code in the AjaxControlToolkit: AutoCompleteExtender

 OnClientShown="resetPosition" 

 

Save your code and refresh the page issue has been resolved..!!