javascript - 将建议框始终直接放在文本框下方

Question

我有一个带有建议框的文本输入，在输入内容时会出现在输入下方。问题是当页面缩放时，有时该框会出现在稍微不同的位置（1-3 像素）。有没有办法保证，无论页面比例是多少，建议框相对于输入字段的底线始终保持在左边 0px 和顶部 0px 的位置？谢谢。

tBox = $('#textBox')[0];

$('#suggestionBox').css({
    width: "151px",
    border: "1px solid grey",
    position: "absolute",
    top: (tBox.offsetTop + tBox.offsetHeight) + "px",
    left: tBox.offsetLeft + "px"
});

<input type="text" id="textBox" />
<div id="suggestionBox" style="display:none;">suggesion</div>  

Answer 1

您是否尝试过使用此http://docs.jquery.com/UI/API/1.8/Position？

http://jsfiddle.net/ZpFm9/1/

$("#suggestionBox").position({
    my: "left top",
    at: "left bottom",
    of: $('#textBox')
});

Answer 2

看简单的例子：http: //jsfiddle.net/JQeTT/

$('#suggestionBox').css({
   width: "151px",
   border: "1px solid grey",
   position: "absolute",
   top: ($('#textBox').offsetTop + $('#textBox').offsetHeight) + "px",
   left: $('#textBox').offsetLeft + "px"
});

$('#textBox').focus(function(){

   $("#suggestionBox").show();
}).blur(function(){ //if lost the focus, the suggestion box hide again
   $("#suggestionBox").hide();
});