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

Question

在我的 web 应用程序中，我在网页顶部的固定工具栏中有一个搜索框。我像这样实现了工具栏的固定位置....

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

现在，我正在使用jQuery 插件在其上实现关键字自动完成功能。

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

自动完成建议框的 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;
}

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

1. 在搜索框中输入内容，显示建议
2. 打开搜索框后，我滚动窗口。
3. 这会导致自动建议框也滚动。

我能做些什么来解决这个错误？

这是它的外观。

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

更新1：我尝试添加position: fixed;到自动完成。

这在不同的情况下会产生问题。

• 在搜索框中输入内容，显示建议
• 按退出键，导致盒子消失
• 向下滚动窗口
• 在搜索框中输入内容，显示建议
• 现在搜索框出现在滚动前出现的位置，因为位置是固定的

更新：

更新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 */
    }

问候

Answer 1

为什么不把搜索结果position: fixed也做出来呢？只要您知道文本框的高度，就可以定位结果列表，使其始终位于文本框元素的正下方。