Javascript 更改jQuery自动完成框的位置

我一直在寻找一个有效的解决方案，几乎有半天了，即使当窗口大小变小或变大时，其中一些在第一眼看上去似乎是有效的，但看起来还是一团糟。我会告诉你我的意思，这样这个问题就不会再重复了

目前，我所拥有的是当用户在输入框中输入一个键时，黄色表格出现并显示文本输入的值

未输入任何内容：

用户在输入框中输入一个字符：

这里的问题是，自动完成框

.ui autocomplete

显示在输入框

#search

的正下方。它应该显示在

表格

元素下面，这样自动完成框就不会隐藏

表格

。下面是它应该是什么样子的图像：

请参阅dev tools CSS编辑器中的

top

属性？我手动更改了它，但更改此属性不会产生任何效果。我在StackOverflow中尝试了很多答案，但都没有效果。这是使用

top

属性转换器的答案：

当用户调整窗口大小时，此方法不起作用。我试过使用

px

和

%

。也许使用大众汽车可以改变一些事情，但我不确定

var tags=[“ActionScript”、“AppleScript”、“Asp”、“BASIC”、“C”、“C++”、“Clojure”、“COBOL”、“ColdFusion”、“Erlang”、“Fortran”、“Groovy”、“Haskell”、“Java”、“JavaScript”、“Lisp”、“Perl”、“PHP”、“Python”、“Ruby”、“Scala”、“Scheme”]；
$（“#搜索”）.autocomplete({
来源：功能（请求、响应）{
var results=$.ui.autocomplete.filter（标记、请求、术语）；
反应（结果切片（0,5））；
}
});
//仅针对#即时搜索功能>>忽略此部分
var changeText2=函数（e）{
var request=$（“input”）.val（）+String.fromCharCode（e.which）；
$（“#即时搜索”）.text（请求）；
如果(
$（“#即时搜索”）
.text（）
.trim（）长度
) {
$（“表格”）.css（“显示”、“表格”）；
}否则{
$（“表”）.hide（）；
}
};
var changeText1=函数（e）{
$（“tr:nth child（1）”）.css({
背景：“ffc800”，
颜色：“fff”
});
如果(
/[-a-z0-90áèèèèèèèèèèèèèèèèèèèèèèèèèèè(
String.fromCharCode（e.which）
)
) {
$（“输入”）。在（“按键”，changeText2）；
}
var getInputSelection=函数（输入）{
var start=0，
结束=0；
input.focus（）；
如果(
输入的类型。选择开始==“编号”&&
typeof input.selectionEnd==“数字”
) {
开始=输入。选择开始；
结束=输入。选择结束；
}else if（document.selection&&document.selection.createRange）{
var range=document.selection.createRange（）；
如果（范围）{
var inputRange=input.createTextRange（）；
var workingRange=inputRange.duplicate（）；
var bookmark=range.getBookmark（）；
inputRange.moveToBookmark（书签）；
工作范围.setEndPoint（“EndToEnd”，输入范围）；
结束=工作范围.text.length；
工作范围.setEndPoint（“EndToStart”，输入范围）；
开始=工作范围.text.length；
}
}
返回{
开始：开始，
完:完,，
长度：结束-开始
};
};
开关（电子钥匙）{
案例“Backspace”：
案例“删除”：
e=e | | window.event；
var-keyCode=e.keyCode；
var deleteKey=keyCode==46；
var sel、deletedText、val；
val=该值；
sel=getInputSelection（此）；
如果（选择长度）{
//0 kai paprastai trini po viena o 1 ar daugiau kai select su pele trini
$（“#即时搜索”）.text(
val.substr（0，选择开始）+val.substr（选择结束）
);
}否则{
$（“#即时搜索”）.text(
val.substr（0，删除键？选择启动：选择启动-1）+
val.substr（删除键？选择结束+1：选择结束）
);
}
打破
}
如果（！$（“#即时搜索”）
.text（）
.trim（）长度
) {
$（“表”）.hide（）；
}
$（“输入”）。关于（“输入”，函数（e）{
$（“#即时搜索”）.text（$（“#搜索”）.val（））；
如果(
$（“#即时搜索”）
.text（）
.trim（）长度
) {
$（“表”）.css（“显示”、“表；”）；
}否则{
$（“表”）.hide（）；
}
});
};
$（“输入”）。在（“向下键”，changeText1）；

html，
身体{
身高：100%；
宽度：100%；
}
身体{
保证金：0；
填充：0；
字体系列：无衬线；
背景：#000428；
/*旧浏览器的回退*/
背景：-webkit线性渐变（向右，#004e92，#000428）；
/*Chrome 10-25，Safari 5.1-6*/
背景：线性渐变（向右，#004e92，#000428）；
/*W3C、IE 10+/Edge、Firefox 16+、Chrome 26+、Opera 12+、Safari 7+*/
}
v型集装箱{
显示：表格；
身高：100%；
宽度：100%；
}
五、内容{
显示：表格单元格；
垂直对齐：中间对齐；
}
.文本中心{
文本对齐：居中；
}
h1{
颜色：#fff；
}
.输入{
溢出：隐藏；
空白：nowrap；
}
.输入#搜索{
宽度：计算（100%-30px）；
高度：50px；
边界：无；
字号：10pt；
浮动：左；
颜色：#4f5b66；
填充：0 15px；
大纲：无；
}
.输入按钮.图标{
边界：无；
高度：50px；
宽度：50px；
颜色：#4f5b66；
背景：#fff；
左边框：1px实心#ddd；
左边距：-50px；
大纲：无；
光标：指针；
显示：无；
-webkit过渡：背景。5s；
过渡：背景。5s；
}
.输入按钮。图标：悬停{
背景：#eee；
}
.ui自动完成{
列表样式：无；
背景：#fff；
-webkit用户选择：无；
用户选择：无；
填充：0；
保证金：0；
宽度：100%！重要；
}
.ui帮助程序隐藏可访问{
显示：无；
}
.三点{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
桌子{
宽度：100%；
边界间距：0；
边界塌陷：塌陷；
显示：无；
表布局：固定；
}
表tr{
背景：#fff；
-webkit用户选择
.ui-autocomplete {
  top: auto !important;
}

$("#search").autocomplete({
  appendTo: '.input'
});