jquery-ui 版本 1.11.4
我整理了一个 jsfiddle https://jsfiddle.net/99uas7dq/1/
<html>
<head>...</head>
<body>
<script>
var availableTags = [
"test1",
"test2",
"test3"
];
$(function() {
$( "input[id*='_text']" ).autocomplete({
source: availableTags,
minLength: 1,
});
});
</script>
<p>this text is outside the scrollable div</p>
<div style="height:200px;overflow-y:scroll;">
<p>test 1</p><p>test 1</p><p>test 1</p>
<p>test 1</p><p>test 1</p><p>test 1</p>
<p>test 1</p><p>test 1</p>
<input type="text" id="demo_text" name="demo_text" />
<p>test 1</p><p>test 1</p><p>test 1</p>
<p>test 1</p><p>test 1</p>
</div>
<p> this text is also outside the scrollable div</p>
基本上是一个内部可滚动的 div，带有文本输入。如果向下滚动使文本框可见，然后单击它，键入“te”以获取自动完成列表，然后将鼠标移到文本框外并用鼠标滚轮滚动，自动完成列表是孤立的，它是左边的挂着。
我如何让可滚动的 div 关闭自动完成，或者让它随着输入移动，就像它不在可滚动的内部 div 中一样？
感谢您的帮助。
最佳答案
更新了您的 jsfiddle用微小的代码。让我知道它是否符合您的要求。
我所做的是在滚动时隐藏提示文本即:
$(".scrollable").scroll(function() {
$(".ui-autocomplete").hide();
});
关于javascript - jquery-ui 自动完成在内部 div 滚动时悬空，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38577006/