Autocomplete issue into bootstrap modal

Question

I have a display problem in the jQuery autocomplete inside a modal dialog bootstrap.

When I mouse scroll, the results do not remain attached to the input.

Is there a way to solve this?

Here JsFiddle:

.ui-autocomplete-input {
  border: none; 
  font-size: 14px;
  width: 300px;
  height: 24px;
  margin-bottom: 5px;
  padding-top: 2px;
  border: 1px solid #DDD !important;
  padding-top: 0px !important;
  z-index: 1511;
  position: relative;
}

EDIT I found the problem:

.ui-autocomplete {
  position: fixed;
  .....
}

If the modal has scroll the issue remains!

Here JsFiddle/1.

Answer 1

The position is right that it is "absolute", while you need to specify this as an option to autocomplete:

$( ".addresspicker" ).autocomplete( "option", "appendTo", ".eventInsForm" );

Where it can anchor the box with the results in any element, I have to stop it from being anchored to the form's class!

Here is a working JsFiddle!.

Answer 2

The above solution talking about the z-index issue worked:

.ui-autocomplete { z-index:2147483647; }

Make sure you put it before your .js script responsible for handling the modal AND autocomplete logic.

Answer 3

Check out the appendTo documentation:

When the value is null, the parents of the input field will be checked for a class of ui-front. If an element with the ui-front class is found, the menu will be appended to that element.

So just add the class "ui-front" to the parent element and the autocomplete will be correctly displayed inside the modal.