jquery autocomplete list does not stick with parent input element

Question

I'm having some difficulty adapting jqueryUI autocomplete to my site's CSS layout.

Whenever I call the autocomplete function onto an input field, the list opens as expected. Since the input lives within a div that is of fixed height, when the user scrolls that div, the autocomplete list stays fixed.

Has anyone encountered this and know of a workaround? This issue does not occur when the parent div is not fixed in height.

I've made a jsfiddle mockup here: http://jsfiddle.net/NSm7f/1/

here is my sample code:

<div class="root">
    <div id="Header">
        <div class='heading'>Test</div>
    </div>
    <div class='box' id="Wrapper">
        <div class='box' id="Leftpanel">
            <p>some text</p>
                <h1>Other stuff</h1>

            <br>
            <br>Autocomplete box:
            <input id="box1">
            <p>some text</p>
                <h1>Other stuff</h1>

            <br>
            <br>Another autocomplete:
            <input id="box2">
            <p>some text</p>
                <h1>Other stuff</h1>

            <br>
            <br>
            <p>some text</p>
                <h1>Other stuff</h1>

            <br>
            <br>
            <p>some text</p>
                <h1>Other stuff</h1>


            <br>
            <br>
        </div>
        <!--Leftpanel-->
        <div class='box' id="Rightpanel">
            <form>
                <textarea rows="33" cols="45"></textarea>
                <br>
            </form>
        </div>
        <!--End rightpanel-->
    </div>
    <!--wrapper-->
</div>
<!--root-->

My JS (yes, I have jqueryUI and the default jqueryUI css loaded):

 $("#box1").autocomplete({
     source: ['Skull,Nasal', 'Skull,Lacrimal', 'Skull,Inferior Nasal Concha', 'Skull,Maxiallary', 'Skull,Zygomatic', 'Skull,Temporal', 'Skull,Palatine', 'Skull,Parietal', 'Skull,Malleus', 'Skull,Incus', 'Skull,Stapes', 'Skull,Frontal', 'Skull,Ethmoid', 'Skull,Vomer', 'Skull,Sphenoid', 'Skull,Mandible', 'Skull,Occipital', 'Rib 1', 'Rib 2', 'Rib 3', 'Rib 4', 'Rib 5', 'Rib 6', 'Rib 7', 'Rib 8 ', 'Rib 9 ', 'Rib 10 ', 'Coccyx']
 });

 $("input#box2").autocomplete({
     source: ['Skull,Nasal', 'Skull,Lacrimal', 'Skull,Inferior Nasal Concha', 'Skull,Maxiallary', 'Skull,Zygomatic', 'Skull,Temporal', 'Skull,Palatine', 'Skull,Parietal', 'Skull,Malleus', 'Skull,Incus', 'Skull,Stapes', 'Skull,Frontal', 'Skull,Ethmoid', 'Skull,Vomer', 'Skull,Sphenoid', 'Skull,Mandible', 'Skull,Occipital', 'Rib 1', 'Rib 2', 'Rib 3', 'Rib 4', 'Rib 5', 'Rib 6', 'Rib 7', 'Rib 8 ', 'Rib 9 ', 'Rib 10 ', 'Coccyx']
 });

and my css:

.box {
    float: left;
}
#root {
    max-width: 1200px;
    margin: 0 auto;
}
#Wrapper {
    width: 100%;
    display: table;
}
#Leftpanel, #Rightpanel {
    vertical-align: top;
}
#Leftpanel {
    width: 57%;
    display: table-cell;
    height:750px;
    color: #B29D72;
    overflow:scroll;
    background-color: #272F44;
    -moz-border-radius: 2px;
    border-radius: 5px;
    padding: 1%;
    margin:0.5%
}
#Rightpanel {
    width: 37%;
    display: table-cell;
    height: 750px;
    color: #B2A283;
    background-color: #0D162C;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 1%;
    margin:0.5%
}
#Sidebar {
    width: 15%;
    background-color: #B2A283;
    color: #0D162C;
    padding:1%;
    margin:0.5%;
    -moz-border-radius: 2px;
    border-radius: 5px;
}
#Sidebar a:link {
    color: #FFF4CB;
}
#Footer {
    width: 97%;
    height: auto;
    background-color: #B2A283;
    color: #0D162C;
    padding: 1%;
    margin: 0.5%;
    -moz-border-radius: 2px;
    border-radius: 5px;
}
#Footer a:link {
    color: #FFF4CB;
    padding-left: 5px;
    padding-right: 5px;
}
#Footer A:hover {
    color: #CA9221;
}
#Sidebar .slide-out-div {
    padding: 20px;
    width: 250px;
    background: #ccc;
    border: 1px solid #29216d;
}

Answer 1

Here is a solution that does not involve any scripting and seems to do the trick.

Autocomplete, by default, appends the list to the body of the document. If you insert the option to appendTo: "parent div that is fixed height" and change the UI-css class for ui-autocomplete from postion:fixed to position:relative, the list will follow the div scroll.

I think this is an easier solution to implement, though @Trevor's will also work.

see this updated fiddle: http://jsfiddle.net/NSm7f/3/

The key is adding this to your document or change the UI-css with:

.ui-autocomplete {
    position: relative;
}

Answer 2

Best way is to give parent element the class ui-front and the ui-autocomplete takes care of it: https://api.jqueryui.com/autocomplete/#option-appendTo

Answer 3

Here is one option, you can also consolidate your autocomplete call so you don't have to call it on each box individually:

 var scrollPosition = -1;
 $("[id^=box]").autocomplete({
        source: ['Skull,Nasal', 'Skull,Lacrimal', 'Skull,Inferior Nasal Concha', 'Skull,Maxiallary',  'Skull,Zygomatic',  'Skull,Temporal',  'Skull,Palatine',  'Skull,Parietal',  'Skull,Malleus',  'Skull,Incus',  'Skull,Stapes',  'Skull,Frontal',  'Skull,Ethmoid',  'Skull,Vomer',  'Skull,Sphenoid',  'Skull,Mandible',  'Skull,Occipital',  'Rib 1',  'Rib 2',  'Rib 3',  'Rib 4',  'Rib 5',  'Rib 6',  'Rib 7',  'Rib 8 ',  'Rib 9 ',  'Rib 10 ',  'Coccyx'],
     open: function( event, ui ) {
         scrollPosition = $('#Leftpanel').scrollTop();  
     },
     close: function(event, ui ){
         scrollPosition = -1;     
     }
});
$('#Leftpanel').scroll(function(){
    if(scrollPosition != -1){
       $('#Leftpanel').scrollTop(scrollPosition); 
        $('#Wrapper').focus();
    }
});

Example

http://jsfiddle.net/trevordowdle/9m2Qg/

Example 2 (improved scrolling)

http://jsfiddle.net/trevordowdle/9m2Qg/3/

Only tested on google chrome.