JqueryUi Autocomplete shown in wrong place when using input field in div with position:fixed

Question

I have a "modal window" in a webpage obtained by applying to a div the css property position to fixed. The div contains input fields. In particular, I'm using the autocomplete widget from jQueryUI. There are two major problems:

1) the first is that, since the div has a fixed position, when you scroll down the webpage, the autocomplete suggestions are not shown fixed but are moved up and down with the page. You can see that problem at this Codepen where I'm using an example from jQuery website with city-name autocompletion.

2) The second problem is that the suggestions from autocomplete are shown in the upper-left corner of the page and not just below the input field. Unfortunately, I tried to reproduce this problem in Codepen, but I can't.

I'm quite sure that the problem is due to the CSS, and in particular to such style properties provided by the JQuery-UI. Maybe the problem can be resolved by using the position option of the autocomplete widget.

What CSS property should I define and how?

PS: I use the theme provided at http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css.

Yseulta

Answer 1

Looking at the jQuery UI library, I see that the <ul> element is used to show the suggestions. jQuery UI appends this element by default to the HTML document and not to the <div> (used as "modal window") of the text input.

However, the documentation shows that the option appendTo configures which element the autocomplete <ul> should be appended to. It uses jQuery's appendTo() function. http://jqueryui.com/demos/autocomplete/#option-appendTo

So, I included a div to contains the suggestions:

<input type="text" id="myInput" />
<div id="container">
</div>

And in the autocomplete() function I added the option:

appendTo: "#container"

Then I added the following CSS

#container {
    display: block; 
    position:relative
} 
.ui-autocomplete {
    position: absolute;
}

That's all!

Yseulta

Thanks for sharing your answer. Just used a similar fix with appendTo for a problem where the autocomplete suggestions would get displayed at the wrong position with a frameset - based on reading your answer. :) – Millennium

It does not fixed my problem, but everyone who trying to fix that first just check if you have the latest jquery-ui version. Initially i've got version 1.8.bla and it was faulty, but after i updated to 1.10.2 all working. – Redmer

I had a problem when the container of the input(trigger autocomplete dropdown list) scrolls the list is fixed to the screen. Using JeanValjean's method that add a container right after the input and using 'appendTo' solved my problem. No extra CSS needed. Thank you! – Resuscitate

Answer 2

Make sure you only load one version of Jquery and one of the UI I discovered this after reading @Riapp's answer, I played around and could see that you need matching version numbers and never too many....

Otherwise the autocomplete will be an absolute, and fly to the top.

 <script type="text/javascript"
    src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css"
    href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" />

Treasury

Updating to latest jQuery UI version fixed my issue – Journeywork

Answer 3

had the same problem. Delete jquerUI base themes, Uninstall jqueryUI library then reinstall jqueryUI and now works fine. Not sure what you're working with but I'm on MVC4 so many bugs, I'm about to kill myself. Good Luck.

EDIT: this was the real problem

In looking at an older project to see if the autocomplete was working we found that many of the styles in the older project were not in the newer. Not sure if I erased them but can't imagine doing so. All I had to do was copy and paste those classes that were missing from my new project and everything went back to normal. I think someone is sabotaging my project.

Andresandresen