Typeahead positioning bug with modals, scrolling and window resize

Created by: wesley-murch

The dropdown list that appears when using typeahead() doesn't stick to the input when scrolling, or when resizing the window This occurs in modals, or anytime where the parent element is fixed position.

Here's is a demo:

http://jsfiddle.net/cBLUL/

How to reproduce:

1. Focus the input and type until the suggestion list appears
2. While the result list is visible, scroll the page or...
3. Resize the "Result" pane in jsfiddle

Expected result: Suggestion list does not move at all, but stays "glued" to the input.

Actual Result: The suggestion list moves around, sometimes off screen.

Here's a screen capture to demonstrate: http://www.screenr.com/CNR8

I found the scroll issue by accidentally using the mouse wheel while focused in an input with typeahead. I found the resize issue while producing a test case for the scroll issue.

It appears that the typeahead list is appended to body. This could probably be easily fixed by putting the element just after the input itself instead, or even as a last child of the parent form (or just outside the parent form) so as not to mess up any CSS or JS that relies on certain adjacent elements being in place...

On second thought, not every input will have a parent form (should, but may not in the wild), and as mentioned, putting the element in the DOM anywhere else could cause other bugs, so I'm not sure that would be a real solution.