I'm using rails3-jquery-autocomplete in my application. I've faced the following issue: if you enter something in the input field so that autocomplete data gets displayed and scroll the page after that, the box with the autocomplete data isn't scrolled with the page. It stays at the same position.

You can look at what i'm facing here. Note that this example isn't created by me, so i'm not sure the same jquery plugin is used here. Nevertheless the issue is pretty the same.

I'm using rails3-jquery-autocomplete in my application. I've faced the following issue: if you enter something in the input field so that autocomplete data gets displayed and scroll the page after that, the box with the autocomplete data isn't scrolled with the page. It stays at the same position.

You can look at what i'm facing here. Note that this example isn't created by me, so i'm not sure the same jquery plugin is used here. Nevertheless the issue is pretty the same.

• javascript
• jquery
• ruby-on-rails
• autocomplete
• jquery-autocomplete

4 Answers 4

add this to the css

     .ui-autocomplete { 
       height: 200px;
       overflow-y: scroll;
       overflow-x: hidden;
     }

Probably you are missing appendTo-attribute from options to Autocomplete. It defaults to body, but you probably want to have it your container div (hard to say exactly without seeing your code).

See documents.

But have you checked the scenario, after applying height and overflow for the result can't able to scroll through the list using keyboard down arrow, which can able to scroll using mouse. If we use keyboard to scroll it keeping the scroll bar ideal and making the highlight value to traverse throughout the list.

I know this is old but I just fixed this in my own project by adding a CSS property of "position: fixed" to ".ui-autocomplete" in my project. Check it out here if u want: 34.212.191.181:3000.

P/s the page is in Vietnamese, just play with the search box in the nav bar :)