Question

我为网站创建了一个搜索功能，此外我根据他们输入的内容创建了一个“建议框”。（就像谷歌一样！）

所以我的问题是，根据窗口大小，框会浮出位置。如何将其修复到搜索字段的底部？

在此处找到实时示例：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？

Answer 1

你可以使用CSS中的嵌套div和相对/绝对定位来做到这一点，你真的不需要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自动完成小部件，之前我已经使用过它而且它非常强大

CSS＆＃34;建议搜索框＆＃34;不合适

1 个答案: