修复了带有自动完成建议的定位搜索框
在我的网络应用程序中，我在网页顶部的固定工具栏中有一个搜索框。 我像这样实现了工具栏的固定位置......
#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：我尝试将 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 */
}
问候
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;
}
Now, I am implementing a keyword autocomplete function on it using a jQuery plugin.
My problem is how to keep the autocomplete suggestions fixed/attached to the search box when the window is scrolled/resized.
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..
- Type something in search box, causing the suggestions to appear
- With search box open, I scroll the window.
- This causes the autosuggestions box to be scrolled as well.
What can I do to solve this bug?
Here is how it looks.
The autocomplete have scrolled over the fixed positioned input box.
Update 1: I tried adding the position: fixed; to the autocomplete.
That gives problem in a different case.
- 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
Update:
Update 2:
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 */
}
Regards
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
为什么不让搜索结果也
position:fixed呢？只要您知道文本框的高度，就可以定位结果列表，使其始终位于文本框元素的正下方。Why not make the search results
position: fixedas 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.包含结果列表（具有位置：绝对）的容器上的位置：相对解决了问题。
position:relative on the container, that contains the results list (which has position:absolute) solves the problem.
position:fixed不是做你想做的事情的方法。position:absolute 应该已经解决了你的问题，但这让我认为它们要么是浏览器错误（你测试过哪些浏览器），要么插件或 css 中的某些内容正在用
覆盖- 您是否检查过 Firefox 中的 FireBug 以查看应用于下拉框的实际 CSS？position:absoluteposition:fixed这是我能想到的唯一两个可以解释你所看到的原因。
position:fixedis not the way to do what you're after.position:absolute should have solved your issue though which makes me think either their is a browser bug (which browsers have you tested) or something in the plugin or css is overwriting the
position:absolutewithposition:fixed- have you checked FireBug in Firefox to see the actual CSS being applied to the dropdown box?Those are the only 2 causes I can think of to explain what you're seeing.