2

サイトの検索機能を作成し、さらに、入力内容に基づいてドロップダウンする「提案ボックス」を作成しました。（グーグルのように！）

だから私の問題は、ウィンドウのサイズによってはボックスがずれて浮いてしまうことです。検索フィールドの下部に固定するにはどうすればよいですか？

ここにあるライブの例：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ではなくパーセンテージを使用する方法はありますか？

4

1 に答える 1

3

これは、CSSでネストされたdivと相対/絶対配置を使用して行うことができます。ドロップダウンを配置するために、JavaScriptは実際には必要ありません。

search-formにパディング/マージンがないと仮定すると、このようなものはフラッシュする必要があります

#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オートコンプリートウィジェットをいつでも使用できます。これはかなり前に使用したことがあり、かなり堅牢です。

于 2012-04-06T20:34:14.293 に答える