在文本框下动态放置一个 Div 以显示选项答案

【问题标题】：Placing a Div dynamically under text box to show options在文本框下动态放置一个 Div 以显示选项
【发布时间】：2010-04-12 20:49:08
【问题描述】：

我有一个网页，我试图在其中放置搜索功能。除了搜索框，我放置了一个图像。当用户单击图像时，我想显示一个包含一些内容的小 div（各种过滤器选项，如“在联系人中搜索，在电子邮件中搜索，在垃圾箱中搜索等”）。我想将 div 放在搜索框下方。现在我想知道我应该将这个 div 放在我的 HTM 标记中的什么位置？我想知道如何将 div 放在一个特殊的位置。（像自动建议之类的东西）。我如何在 javscript 中处理这个？我的最终目标是当用户单击图像时在搜索框（文本框）下显示 Div（showSearchOptions 函数）

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

【问题讨论】：

标签： javascript search positioning

【解决方案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";
 }

【讨论】：

【解决方案2】：

第 1 项。将新 div 放在哪里并不重要，因为您会将其设置为 position: absolute;并显示：无；这将从文档流中删除它。然后当它被定位和显示时，它会简单地显示在你放置它的地方。（见答案 1。）

【讨论】：

【解决方案3】：

在担心 javascript 之前，请在您想要的位置使用搜索选项 div 设置页面，就好像它是一个静态页面一样。但是，相对于某个容器，将该 div 设置为 position: absolute;，这样当它出现时，它就不会弄乱它周围的其他元素。当绝对定位时，它在 HTML 代码中的位置并不重要——除了在 position: relative; 的容器内——因为 CSS 会将它定位在您想要的位置。

当您对布局感到满意时，将该 div 设置为 display: none;，然后设置 javascript 以在单击图像时显示它。你可能最好使用某种框架来帮助解决这个问题。例如，在 jQuery 中，你会使用这样的东西：

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

不需要注册点击的<a>。

【讨论】：