Question

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中那么？

感谢您的帮助。

Answer 1

使用微小的代码更新了您的jsfiddle。如果它符合您的要求，请告诉我。

我所做的是在滚动时隐藏提示文本，即：

        $(".scrollable").scroll(function() {
          $(".ui-autocomplete").hide();
        });

当内部div滚动时，jquery-ui自动完成左挂

1 个答案: