修复了带有自动完成建议的定位搜索框答案

【问题标题】：Fixed positioned search box with Autocomplete suggestions修复了带有自动完成建议的定位搜索框
【发布时间】：2010-08-25 07:26:00
【问题描述】：

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

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

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

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

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

这是它的外观。

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

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

问候

【问题讨论】：

我想，只有一个活生生的例子才能帮助我们帮助你。

标签： jquery css jquery-autocomplete

【解决方案1】：

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

【讨论】：

我试过这样做。它没有成功。查看更新结果。
你能展示你用来实现这个目标的代码吗？也许是一个活生生的例子？
我没有听从你的完整建议，这就是它不起作用的原因。我只是添加了position: fixed，但没有更改自动完成框的top 属性。这样做，就行了。非常感谢。
嗯，但是如果您在结果打开时向下滚动页面，它们将向下移动页面。这可不好
@Alex：不，他们不会下移。由于我添加了position: fixed，请查看更新。

【解决方案2】：

position:relative 在容器上，包含结果列表（具有 position:absolute）解决了问题。

【讨论】：

【解决方案3】：

position:fixed 不是做你想做的事的方法。

position:absolute 应该已经解决了您的问题，但这让我认为它们是浏览器错误（您测试过哪些浏览器）或者插件或 css 中的某些东西正在用position:fixed 覆盖position:absolute - 你检查过吗Firefox 中的 FireBug 以查看应用于下拉框的实际 CSS？

这是我能想到的唯一两个原因来解释你所看到的。

【讨论】：