带有自动填充建议的固定搜索框 [英] Fixed positioned search box with Autocomplete suggestions

问题描述

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

In my webapp I have a search box in a fixed toolbar on the top of webpage. I implemented the fixed position of toolbar like this....

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

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

我的问题是如何

自动填充建议框的css是....

The css for autocomplete suggestions box is....

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

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

I have a problem when I perform these operations..

1. 在搜索框中输入内容，从而显示建议


2. 在搜索框打开时，滚动窗口。 / li>
   
3. 这会导致自动建议框也被滚动。

这个bug？

这是它的外观。

自动填充已滚动到固定位置的输入框。

The autocomplete have scrolled over the fixed positioned input box.

更新 1：

在不同的情况下会出现问题。

That gives problem in a different case.

• 在搜索框中输入内容，导致出现建议


• 按Esc键，使框消失
$ b
• 向下滚动窗口


• 在搜索框中输入内容，从而显示建议


• 现在搜索框出现在：
  

• Type something in search box, causing the suggestions to appear
• Press escape, causing the box to disappear
• Scroll down the window
• Type something in search box, causing the suggestions to appear
• Now the search box, appears at the position it appeared before scrolling since the position is fixed

更新：

更新2 ：

以下代码已添加到自动填充css中。

The following code added to autocomplete css does the trick.

.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 */
    }

>

推荐答案

为什么不让搜索结果 position：fixed 只要知道文本框的高度，就可以定位结果列表，使它总是在textbox元素下。

Why not make the search results position: fixed as well? As long as you know the height of the textbox, you can position the results list such that it is always just under the textbox element.

这篇关于带有自动填充建议的固定搜索框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！