Positionnement de la fenêtre contextuelle avec JavaScript et CSS

Question

Mon application Web comporte un champ de recherche dans lequel l'utilisateur peut saisir des tags pour effectuer une recherche. La fenêtre devrait apparaître juste sous le champ de recherche, comme dans l'image ci-dessous:

Le détail principal que j'ai besoin de comprendre est de savoir comment le positionnement de la fenêtre est implémenté. Est-ce un div caché avec un positionnement absolu et un z-index? Je suis intéressé par les approches Vanilla Javascript, HTML5 et CSS les plus courantes.

Answer 1

La boîte à suggestions est un composant de saisie semi-automatique. Vous pouvez très bien utiliser le jeton d'entrée jQuery par James Smith (http://loopj.com/jquery-tokeninput/)

En ce qui concerne la curiosité de position:

Il est juste une question d'alignement au fond de l'élément d'entrée. Cela peut être fait en utilisant du CSS pur.

input { 
 
    width: 50%; 
 
} 
 

 
.spanClass { 
 
    display: none; 
 
} 
 

 
.focusAlign input[type="text"]:focus~.spanClass { 
 
    display: block; 
 
    width: 50%; 
 
    box-sizing: border-box; 
 
    position: absolute; 
 
    top: 29px; 
 
    left: 8px; 
 
    background: #333; 
 
    padding: 3px; 
 
    font: .75em sans-serif; 
 
    color: #eee; 
 
}

<div class="focusAlign"> 
 
    <input id="same" type="text" value="" /> 
 
    <span class="spanClass"> 
 
    <p>Oh, this is a suggestion.</p> 
 
    <p>Yeah, well, so am I.</p> 
 
    <p>Me, too!</p> 
 
    <p>Whatever, I'm here.</p> 
 
    </span> 
 
</div>