CSS “建议搜索框”位置不合适
CSS "Suggestions search box" out of position
我为一个网站创建了一个搜索功能,此外,我还制作了一个"建议框",可以根据他们输入的内容下拉。(就像谷歌一样!
所以我的问题是,根据窗口大小,盒子会浮出位置。如何将其修复到搜索字段的底部?
在这里找到的实时示例:http://swissinstruments.com/searchresults.php(请参阅顶部搜索字段,键入"a"或"c"以获取一些建议。
现在对于我正在使用的一些代码:
建议框样式
.suggestion_list
{
z-index:500;
background: white;
border: 1px solid #80B6E1;
padding: 4px;
float:none;
margin-top:5px;
width:191px;
position:fixed;
}
.suggestion_list ul
{
padding: 0;
margin: 0;
list-style-type: none;
}
.suggestion_list a
{
text-decoration: none;
color: navy;
}
.suggestion_list .selected
{
background: navy;
color: white;
}
.suggestion_list .selected a
{
color: white;
}
#autosuggest
{
display: none;
}
The SEARCH BOX Style
#search-form { float:right; padding:9px 0 0 0;}
#search-form fieldset {
border:none;
border:1px solid #0f58a2;
border-top:none;
background:#126dbe;
padding:0 12px 10px 13px;
float:right
}
#search-form input.text { width:190px; border:1px solid #d0e0e6; margin-right:3px; padding:2px 2px 3px 7px;}
#search-form input.submit { background:#007cff; width:59px; text-align:center; height:23px; line-height:23px; color:#fff; font-size:.77em; text-transform:uppercase; border:none; cursor:pointer;}
最后是用于定位div 的 JavaScript 部分。 我将x设置为-164,因为它似乎适用于大多数用户使用的分辨率。但是一旦我缩小或拉伸它,盒子就错位了。
/********************************************************
Position the dropdown div below the input text field.
********************************************************/
this.positionDiv = function()
{
var el = this.elem;
var x = -164;
var y = el.offsetHeight;
//Walk up the DOM and add up all of the offset positions.
while (el.offsetParent && el.tagName.toUpperCase() != 'BODY')
{
x += el.offsetLeft;
y += el.offsetTop;
el = el.offsetParent;
}
x += el.offsetLeft;
y += el.offsetTop;
this.div.style.left = x + 'px';
this.div.style.top = y + 'px';
};
有没有办法使用百分比而不是 px?
你可以在CSS中使用嵌套的divs和相对/绝对定位来做到这一点,你真的不需要javascript来定位下拉列表。
像这样的东西应该是齐平的,假设搜索表单没有填充/边距
#suggest_container { position:relative; overflow:visible; }
#autosuggest { position:absolute; top:<height-of-search-form>; left:0px; }
<div id="suggest_container">
<form id="search-form"></form>
<div id="autosuggest"></div>
</div>
你也可以总是使用jquery UI自动完成小部件,我以前用过很多次,它相当健壮。
相关文章:
- 谷歌水印未显示在自定义搜索框中
- 为自定义网站创建JavaScript搜索框,创建显示搜索结果的弹出窗口
- 如何让量角器在搜索框内点击
- 如何为一个搜索框实现两个高级自动补全
- 如何从Chosen JS中删除搜索框
- 选择中的搜索框
- 如何在搜索框中获取从特定字母开头的单词
- 谷歌搜索框Java脚本
- 输入的最小长度(搜索框)
- Angular ng sortable-如果我在一个栏中添加了一个搜索框,则拖放在两列之间无法正常工作
- 需要移动下拉框搜索的位置
- “;位置搜索框”;在Google Places API中
- 在选择后,在搜索框中隐藏HERE地图的建议列表
- 带有 php 和 jquery 的自动建议搜索框
- CSS “建议搜索框”位置不合适
- 如何开发智能文本字段(如谷歌搜索框),在输入文本时给出建议
- 搜索没有位置的谷歌地图框
- 谷歌地图位置搜索框:如何重新计算pac-container的位置
- 如何在javascript、谷歌地图中使用setPanel()添加位置搜索框和文本方向
- 使用ajax调用进行搜索框搜索的自动建议