CODEWITHSUNDEEP
javascriptjquerycssautocomplete
cdturner
cdturner

Reputation: 432

jquery-ui autocomplete left hanging when inner div scrolls

jquery-ui version 1.11.4

I put together a 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>

basically an inner scrollable div, with an text input. if you scroll down to make the text box visible, then click in it, type "te" to get the autocomplete list, then move the mouse outside the text box and scroll with the mouse wheel, the autocomplete list is orphaned, it is left hanging.

How do I get the scrollable div to dismiss the autocomplete, or let it move with the input, as it would if this wasn't in a scrollable inner div ?

Thanks for your help.

Upvotes: 0

Views: 931

Answers (1)

kasperite
kasperite

Reputation: 2478

updated your jsfiddle with tiny code. Let me know if it does what you want.

What I have done is to hide the hint text when scrolling ie:

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

Upvotes: 1

Related Questions