Autocomplete issue into bootstrap modal

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!.

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.

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.

With add the class "ui-front" to the div parent element and the autocomplete will be correctly displayed inside the PopUp For Me.

The actual issue is that the Bootstrap Modal has a higher Z-index than any other element in the page. Thus, auto complete actually works - but it gets hidden behind the dialog.

You just need to add this in any of your added css files:

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