javascript - 如何在输入文本的正下方添加 div？

Question

我想开发我的简单自动完成功能，我对 JQuery 自动完成插件不感兴趣。

我只是想在输入文本的正下方添加一个潜水，这段代码应该可以工作，我做错了什么？实现它的方法是什么？

JSFiddle

如果你不想打开 fiddle ，这里是代码:

$("#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/