Placer une Div dynamiquement sous la zone de texte pour afficher les options

Question

J'ai une page Web où j'essaie de mettre une fonctionnalité de recherche.along avec la boîte de recherche, je mets une image.Lorsqu'un utilisateur clique sur l'image je veux montrer un petit div avec du contenu (diverses options de filtrage comme "rechercher dans les contacts, rechercher dans les e-mails, rechercher dans la corbeille etc"). Je veux placer la div juste en dessous du champ de recherche. Maintenant, je veux savoir où devrais-je placer cette div dans mon balisage HTM? Je me demande comment puis-je placer le div sur une position purticular. (Quelque chose comme l'autosuggest). Comment puis-je gérer cela dans javscript? Mon objectif ultime est de montrer la division sous la searchbox (zone de texte) lorsque l'utilisateur clique sur l'image (fonction 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> 

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

Point 1. Il n'a pas beaucoup d'importance où vous mettez la nouvelle div, puisque vous le ferez positionner: absolu; et afficher: aucun; et cela l'enlèvera du flux de documents. Ensuite, quand il est positionné et affiché, il apparaîtra simplement où vous l'avez mis. (Voir la réponse 1.)

Answer 3

Avant de vous soucier de javascript, obtenez la page configurée avec votre option de recherche div où vous le souhaitez, comme s'il s'agissait d'une page statique. Définissez ce div à position: absolute; par rapport à un conteneur, cependant, de sorte que quand il apparaît, il ne gâche pas les autres éléments autour d'elle. Lorsqu'il est positionné de manière absolue, il n'a pas vraiment d'importance là où il se trouve dans votre code HTML - autre que dans un conteneur qui est position: relative; - puisque le CSS le positionne où vous le souhaitez.

Lorsque vous êtes satisfait de la mise en page, définissez ce div sur display: none;, puis configurez le javascript pour qu'il s'affiche lorsque vous cliquez sur l'image. Vous êtes probablement mieux avec une sorte de cadre pour aider à cela. En jQuery, par exemple, vous pouvez utiliser quelque chose comme ceci:

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

le <a> pour l'enregistrement du clic est pas nécessaire.