javascript - テキストボックスのすぐ下に div を配置する

Question

たくさん検索しましたが、満足のいく結果が得られませんでした。オートコンプリートテキストボックスに JavaScript を使用して、テキストのすぐ下に div を取得しようとしています

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

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

any help!

Answer 1

一般に、javascript イベントを html に添付することはお勧めできません。私の考えは、動的に div を作成し、入力フィールドのすぐ下に配置することです。次のコードが機能すると思います。ここにもjsfiddleがありますhttp://jsfiddle.net/krasimir/qCXPu/3/

<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" />
</div>

JavaScript:

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;');
            this.parentNode.appendChild(this.suggestion);
        } else {
            this.suggestion.innerHTML = text;
            this.suggestion.style.display = 'block';
        }        

    });
    field.addEventListener('blur', function(event) {
        if(this.suggestion) {
            this.suggestion.style.display = 'none';
        }
    });
}

Answer 2

これを試して ：

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

JavaScript :

function suggest(obj)
    {
        $('<div><p>inserted div</p><div>').insertAfter(obj);
    }

Answer 3

ここでサンプルを作成しました。これは、テキストボックスのすぐ下に div を追加するためのものです。

より完璧なコードはこちら

#bottom-div {
    z-index: 999;
    position: absolute;
    min-width: 290px;
    background: #fff;
    padding: 10px;
    border: 1px solid #ccc;
    height: 80px;
    cursor: pointer;
    display: none;
    border-top-color: #000;
}

    #bottom-div > div {
        padding-bottom: 5px;
    }

Answer 4

使用する

function suggest(e,the) { $(the).after("<div>Some content</div>"); }