带有自动完成建议的固定位置搜索框

在我的webapp中,我在网页顶部的固定工具栏中有一个搜索框。 我这样实现了工具栏的固定位置…..

现在,我正在使用jquery插件在其上实现关键字autocomplete函数。

我的问题是,当滚动/调整窗口大小时,如何将自动完成建议固定/附加到搜索框中。

用于自动完成建议的CSS框是…..

element.style{
显示:无;
左:166px;
位置:绝对;
顶部:96PX;
宽度:130px;
}
ACX结果{
背景色:白色;
边界:1px固体c5dbec;
溢出:隐藏;
填料:0;
Z指数:99999;
}
< /代码> 

我在执行这些操作时遇到问题…


在搜索框中键入内容,使建议出现
打开搜索框后,我滚动窗口。

这也会导致自动提示框滚动。



我能做些什么来解决这个bug?

这是它的样子。



自动完成功能已滚动到固定位置的输入框上。


update1:I tryed adding theposition:fixed;to the autocomplete.


在另一种情况下会出现问题。



在搜索框中键入内容,使建议出现
按Escape键,使盒子消失
向下滚动窗口
在搜索框中键入内容,使建议出现
现在,搜索框出现在滚动之前出现的位置,因为位置是固定的


更新




更新2:。


下面的代码添加到自动完成的CSS中就完成了这个技巧。


.ac_结果{
背景色:白色;
边界:1px固体c5dbec;
溢出:隐藏;
填料:0;
Z指数:99999;
位置:固定;
顶部:0px;
页边距:20px 0px 0px 0px;/*上页边距定义文本框的偏移量*/
}
< /代码> 

关于

#toolbar {
        position: fixed !important; 
        position: absolute;
        height: 25px;
        width: 100%;
        top: 0px;
        left: 0px;
        margin: 0;
        z-index: 100;
        font-size: 12px;
    }


现在,我正在使用a jQuery plugin.

我的问题是如何在滚动/调整窗口大小时将自动完成建议固定/附加到搜索框。

“自动完成的CSS建议”框是…

element.style {
   display:none;
   left:166px;
   position:absolute;
   top:96px;
   width:130px;
}
.ac_results {
   background-color:white;
   border:1px solid #C5DBEC;
   overflow:hidden;
   padding:0;
   z-index:99999;
}


我在执行这些操作时遇到问题。


在搜索框中键入内容,使建议出现
打开搜索框后,我滚动窗口。
这也会导致自动提示框滚动。


我能做些什么来解决这个bug?

这是它的样子。



自动完成功能已滚动到固定位置的输入框上。

更新1:我试着把position: fixed;自动完成。

在另一种情况下,这就产生了问题。


在搜索框中键入内容,使建议出现
按Escape键,使盒子消失
向下滚动窗口
在搜索框中键入内容,使建议出现
现在,搜索框出现在滚动之前出现的位置,因为位置是固定的


更新:



更新2:

下面的代码添加到自动完成的CSS中就可以做到这一点。

.ac_results {
       background-color:white;
       border:1px solid #C5DBEC;
       overflow:hidden;
       padding:0;
       z-index:99999;
       position: fixed;
       top: 0px;
       margin: 20px 0px 0px 0px; /* The top margin defines the offset of textbox */
    }


当做