Question

I have created a search feature for a site and in addition I made a “suggestions box” that drops down based on what they are typing. (Like Google does!)

So my issue is, the box floats out of position depending on the window size. How do I fix it to the bottom of the search field?

Live example found here: http://swissinstruments.com/searchresults.php (see top search field, type “a” or “c” to get some suggestions coming down.

Now for some code of what I am using:

The Suggestions Box STYLE

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

Finally the JavaScript part that is used to position the div. I have set the x to -164 since it seems to work for the resolution used by most users. But as soon as I shrink or stretch it the box is out of position.

/********************************************************
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';
};

Is there any way to use percentages rather than px?

Answer 1

You could do this using nested divs and relative/absolute positioning in CSS, you don’t really need javascript to position the dropdown.

something like this should be flush, assuming search-form has no padding/margins

#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>

you could also always use jquery UI autocomplete widget, I’ve used it quite a bit before and it’s fairly robust