javascript - 入力テキストのすぐ下にdivを追加するにはどうすればよいですか？

Question

単純なオートコンプリートを開発したいのですが、JQueryオートコンプリートプラグインには興味がありません。

入力テキストのすぐ下にダイビングを追加したいのですが、このコードは機能すると思われていましたが、何が間違っているのでしょうか。それを達成する方法は何ですか？

JSFiddle

フィドルを開きたくない場合のコードは次のとおりです。

$("#txtSearch").keypress(function (e) {
    if ($("#txtSearch").val().length >= 2) {
        var pos = $("#txtSearch").position();
        $('<div />', {
            'html': "xxxxxxxxx  xx  x"
        }).css({
            top: pos.top,
            left: pos.left,
            width: '300px',
            position: 'absolute',
            'background-color': 'Yellow'
        }).appendTo($("#txtSearch"));
    }
});

Answer 1

以下のコードを試してください、

$("#txtSearch").keypress(function (e) {
   if ($("#txtSearch").val().length >= 2) {
      var pos = $("#txtSearch").position();
      $('<div />')
      .html("xxxxxxxxx  xx  x")
      .css({
         top: pos.top + $("#txtSearch").height()  + 1,
         left: pos.left,
         width: '300px',
         position: 'absolute',
         'background-color': 'Yellow'
      }).insertAfter($("#txtSearch"));
   }
});

デモ：http： //jsfiddle.net/uZF5g/1/

Answer 2

.appendTo（ ）空のコンテンツモデル要素に追加することはできません。代わりに.insertAfter（または）を使用してください。.insertBeforeまたtop、少なくとも入力の高さにを追加することもできます。

http://jsfiddle.net/uZF5g/3/

Answer 3

$("#txtSearch").keypress(function (e)
 {
    if ($("#txtSearch").val().length >= 2)
    {
    $('#txtSearch').after('<div id="someID">');
    $('#someID').html('xxxxxxx xx x')
       .css({ 
             top: pos.top, 
             left: pos.left, 
             width: '300px', 
             position: 'absolute', 
             'background-color': 'Yellow' 
           })
       .appendTo($("#txtSearch"));  
    }
 });