bhawin bhawin - 1 year ago 88
CSS Question

place a div just below a textbox

i have searched a lot but didn't got any result which is satisfying
i am trying to get a div just below a text using javascript for my autocomplete textbox

<input type="text" id="one" onkeyup="suggest(event,this)" />
<input type="text" id="two" onkeyup="suggest(event,this)" />
<input type="text" id="two" onkeyup="suggest(event,this)" />

function suggest(e,the)
//here i want to create a div and place just below the textbox on which the keyispressed

any help!

Answer Source

In general it is not a good idea to attach javascript events into the html. My idea is to dynamically create a div and position it just below the input field I think that the following code will work. Here is also a jsfiddle

<div class="wrapper">
<input type="text" id="one" class="suggest" />
<p>some text</p>
<input type="text" id="two" class="suggest" />
<p>some text</p>
<input type="text" id="three" class="suggest" />


var inputs = document.querySelectorAll('.suggest');
for(var i=0; field=inputs[i]; i++) {
    field.addEventListener('keyup', function(event) {
        var text = 'You typed: ' + this.value;

        if(!this.suggestion) {
            var rect = this.getBoundingClientRect();
            var left = rect.left;
            var top = rect.bottom;
            this.suggestion = document.createElement('DIV');            
            this.suggestion.innerHTML = text;
            this.suggestion.setAttribute('style', 'background: #B0B0B0; padding: 6px; position: absolute; top: ' + top + 'px; left: ' + left + 'px;');
        } else {
            this.suggestion.innerHTML = text;
   = 'block';

    field.addEventListener('blur', function(event) {
        if(this.suggestion) {
   = 'none';
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download