jquery autocomplete list does not stick with parent input element

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;
}

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.

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