asp.net – 在向下滚动页面后,对于webkit浏览器,AutoCompleteExt

发布时间：2020-12-16 07:04:26 所属栏目：asp.Net 来源：网络整理

导读：我的页面上有一个AutoCompleteExtender工作正常但当我向下滚动页面并使用它时,建议显示在错误(垂直)位置. 它发生在Safari Chrome但不支持IE和FF,所以我认为这可能是webkit的错. 下面是代码： td div style="position: relative;" asp:TextBox ID="DepartureA

我的页面上有一个AutoCompleteExtender工作正常但当我向下滚动页面并使用它时,建议显示在错误(垂直)位置.
它发生在Safari& Chrome但不支持IE和FF,所以我认为这可能是webkit的错.
下面是代码：

<td>
      <div style="position: relative;">
           <asp:TextBox ID="DepartureAirportTextBox" runat="server" CssClass="DepartureAirport airport-textbox"
                            onblur="javascript:DepartureLostFocus();" onkeydown="javascript:DepartureChanged(event);"></asp:TextBox>
            <asp:Panel ID="DepartureAutocompleteDropDownPanel" runat="server" ScrollBars="Vertical"
                            CssClass="autocomplete-panel" Style="display: none;" />
            <AjaxControlToolkit:AutoCompleteExtender ID="DepartureAirportAutoComplete" runat="server"
                            TargetControlID="DepartureAirportTextBox" CompletionSetCount="200" ServicePath="../WebServices/SecureService.asmx"
                            ServiceMethod="ListAirports" MinimumPrefixLength="3" BehaviorID="DepartureAirport"
                            CompletionListElementID="DepartureAutocompleteDropDownPanel" OnClientItemSelected="SelectDepartureAirport"
                            OnClientPopulating="ShowDepartureIcon" OnClientPopulated="HideDepartureIcon">
           </AjaxControlToolkit:AutoCompleteExtender>               
     </div>
</td>

我试过this&关于SO的this解决方案,但都没有成功.
怎么解决？

更新：
甚至来自微软的the simplest example都有这个问题.添加一些< p>文本框之前和之后的元素&扩展器创建可滚动区域并测试它.

<asp:TextBox ID="txtMovie" runat="server"></asp:TextBox>
        <AjaxControlToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" TargetControlID="txtMovie"
            runat="server" UseContextKey="True" MinimumPrefixLength="2" ServiceMethod="GetCompletionList" />

从上面的链接获取GetCompletionList的代码.这个问题很容易重现.

解决方法

我找到了 solution on Asp.net forums.

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];
    }
}

在Extender的OnClientShown事件上调用resetPosition

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!