My web application has a search field where user can enter some tags to search by. The window should pop-up just under the search field, like in the picture below:
The main detail I need to understand is how is the window positioning implemented. Is it some hidden div with absolute positioning and z-index? I am interested in the most common Vanilla Javascript, HTML5, and CSS approaches.
The suggestion box is an autocomplete component. You could very well use the jQuery Token Input by James Smith ( http://loopj.com/jquery-tokeninput/ )
As far as the position curiosity:
It's just a matter of alignment to the bottom of the input element. That can be done using pure CSS.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.