Placing a Div dynamically under text box to show options

Question

I have a webpage where i am trying to put a search feature.along with the search box, i put an image.When user clicks on the image i want to show a small div with some content(various filter options like "search in contacts,search in emails,search in trash etc").I want to place the div just below the search box. Now i want to know where should i place this div in my HTM markup ? I am wondering how can i place the div on a purticular position. (Some thing like the autosuggest).How do i handle this in javscript ? My ultimate objective is to show the Div under the searchbox (text box) when user clicks on the image (showSearchOptions function )

<div class="divSearchBar">         

        <div id="searchSelect" style="float:left; width:25px;">             
            <a onclick="showSearchOptions();" href="javascript:;">
                    <img id="searchImg" class="searchMore" border="0" src="Images/searchMore.gif"/>
             </a>               
        </div>
       <div class="searchInputDiv">
            <input type="text" style="border: 1px solid red; padding: 1px 0px 0px 3px;"   value="" name="search" id="search"/>
      </div>
 </div>

Answer 1

function getPosition(n,endNode){
    var left = 0;
    var top =0;
    var node = n;
    done=false;
    while(!done){
     if(node.offsetLeft!=null)
      left += node.offsetLeft;
     if(node.offsetTop!=null)
      top += node.offsetTop;
     if(node.offsetParent){
      node = node.offsetParent;
     }else{
      done = true;
     }
     if(node == endNode)
      done = true;
    }
    done=false;
    node = n;
    while(!done){
     if(document.all && node.style && parseInt(node.style.borderLeftWidth)){
      left += parseInt(node.style.borderLeftWidth);
     }
     if(document.all && node.style && parseInt(node.style.borderTopWidth)){
      top += parseInt(node.style.borderTopWidth);
     }

     if(node.scrollLeft){
      left -= node.scrollLeft;
     }
     if(node.scrollTop)
      top -= node.scrollTop;
     if(node.parentNode)
      node = node.parentNode;
     else
      done=true;
    }
    return new Array(left, top);
}


function showSearchOptions(){
   var tmp = document.getElementById("mysearchoptions");
   var searchbox = document.getElementById("searchInputDiv"); // add that id, not just class name to html
   var pos = getPosition(searchbox);
   tmp.style.left = pos[0] + "px";
   tmp.style.top = (pos[1] + searchbox.offsetHeight) + "px";
   tmp.style.visibility = "visible";
 }

Answer 2

Item 1. It does not matter much where you put the new div, since you will make it position: absolute; and display: none; and that will remove it from the document flow. Then when it is positioned and displayed, it will simply show up where you put it. (See answer 1.)

Answer 3

Before worrying about javascript, get the page all set up with your search option div where you want it, as if it was a static page. Set that div to position: absolute; relative to some container, though, so that when it appears, it doesn't mess up the other elements around it. When positioned absolutely, it doesn't really matter where it is in your HTML code--other than inside a container that is position: relative;--since the CSS will position it where you want it.

When you're happy with the layout, set that div to display: none; and then set up the javascript to show it when the image is clicked. You're probably best off with some sort of framework to help with this. In jQuery, for example, you would use something like this:

$('img#searchImg').click(function() {
     $('div#searchOptions').show();
});

the <a> for registering the click is not necessary.