jQuery-UI autocomplete doesn't display in jQuery-UI dialog

Asked 19/7, 2013 at 19:5 Answered 24/11, 2015 at 13:4

Solved jquery css jquery-ui jquery-ui-dialog jquery-ui-autocomplete

I have a jQueryUI autocomplete that resides in a dialog. For some older versions of jQuery/jQueryUI, it displays the list of returned values, and for the newest versions it does not. Furthermore, I have it working correctly on a page with a bunch of other stuff going on even with the new version of jQuery/jQueryUI which doesn't seem to play nice. Obviously, I have something going on which is different, but I can't seem to identify what it is. I understand I can use css to change the z-index, but this seems almost a bit hackish.

Please see the following two live examples.

http://jsbin.com/uciriq/3/ (uses jQuery 1.4.3 and jQueryUI 1.8.4)

http://jsbin.com/uciriq/2/ (uses jQuery 1.9.1 and jQueryUI 1.10.3)

As seen (or more applicable stated "not seen"), the returned autocomplete matches for jQuery 1.9.1/jQueryUI 1.10.3 are displayed behind the dialog.

What is the best solution to allow the returned autocomplete matches to be visible?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
        <title>autocomplete with dialog</title>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js" type="text/javascript"></script>
        <!--
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" type="text/css" rel="stylesheet" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js" type="text/javascript"></script>
        -->

        <script type="text/javascript">
            $(function() {
                $( "#search" ).autocomplete({
                    source: [ "one", "two", "three" ]
                });
                $("#dialog").dialog();
            });
        </script>

    </head>
    <body>
        <div id="dialog" class="dialog" title="Testing">
            <div class="ui-widget">
                <label for="search">one, two, three: </label>
                <input id="search" />
            </div>
        </div>

    </body>
</html>

EDIT I believe the changes to jQueryUI Dialog as described by http://jqueryui.com/upgrade-guide/1.10/ and duplicated below are the cause of my issues. I am not really sure how to best apply them, and would appreciate any advice.

Added appendTo option (#7948) Previously, dialogs had always been appended to the body to ensure they were the last element in the DOM to avoid conflicts with other stacking contexts. However, in order to allow more flexibility and simplify the stacking logic, an appendTo option has been added which defaults to the body. Check out the API documentation for more information.

Removed stack option (#8722) Dialogs previously supported a stack option, which determined whether dialogs should move to the top when focused. As this should always be the case, the opiton has been removed.

Removed zIndex option (#8729) Similar to the stack option, the zIndex option is unnecessary with a proper stacking implementation. The z-index is defined in CSS and stacking is now controlled by ensuring the focused dialog is the last "stacking" element in its parent.

Se answered 19/7, 2013 at 19:5 Comment(1)

I have recently learned that jQueryUI made some somewhat major changes to the dialog widget and how it deals with stacking as described by jqueryui.com/upgrade-guide/1.10. I don't know yet how this applies, but am sure it does. Thanks – Se 20/7, 2013 at 0:2

Change your code to create the dialog first and then make the auto-complete. e.g.

$(function()
{
  $("#dialog").dialog();
  $( "#search" ).autocomplete({
    source: [ "one", "two", "three" ]
    });
});

It should then work properly, allowing you to see the results of the auto-complete.

Fiftieth answered 19/7, 2013 at 20:54 Comment(5)

Thanks Keyneom, That must have been why the one page worked when my test page did not. I included them in the wrong order. While this works (jsbin.com/uciriq/9), one needs to make sure they never put them in the wrong order which could get tricky. – Se 19/7, 2013 at 21:29

You could try having the autocomplete be a part of the dialog's open event or you could try creating a wrapper that you could use when creating a dialog that you knew would have an auto-complete. It might simplify things. – Fiftieth 19/7, 2013 at 22:21

Your open event suggestion might make sense. Note my edited original post where I reference recent changes related to stacking described by jqueryui.com/upgrade-guide/1.10. Makes me wonder if there is some desired better approach to dealing with this. – Se 20/7, 2013 at 0:1

Dude you saved me, this was driving me crazy! Thanks! – Electromagnetism 14/3, 2014 at 14:10

This should be the selected answer, works perfectly. – Heirdom 25/9, 2014 at 13:55

Another hackish answer. Use CSS instead of jQuery to modify the problem child.

.ui-autocomplete {z-index:1000}

http://jsbin.com/uciriq/6/edit

Se answered 19/7, 2013 at 20:37 Comment(0)

You guessed correctly that z-index/appendTo have something to do with your problem.

you need to set the appendTo-option of the autocomplete to an element inside the dialog, then the autocomplete is displayed properly.

caveat: If the result list is longer than the available space inside the dialog, you will get a scrollbar.

I edited your jsbin to reflect this: http://jsbin.com/vavevugoqi/

JS:

$( "#search" ).autocomplete({
  appendTo: "#myContainer",
  source: [ "one", "two", "three" ]
});

HTML:

<div id="dialog" class="dialog" title="Testing">
    <div id="myContainer" class="ui-widget">
        <label for="search">one, two, three: </label>
        <input id="search" />
    </div>
</div>

PS: Sry to dig up such an old question, but I think it may help some people coming here from google (like me).

Skeptical answered 24/11, 2015 at 13:4 Comment(0)

Or for another hackish answer, you can use jQuery to move the z-position. Hopefully, someone comes up with a better answer than my two.

$("#search").autocomplete("widget").css('z-index',1000);

http://jsbin.com/uciriq/5/

Se answered 19/7, 2013 at 20:29 Comment(0)

Changing the z-index only works the first time the drop-down is opened, once closed, the dialog window realizes it has been "tricked" and upgrades its z-index.

Also for me changing the order of creation of the dialog and auto-complete really was a hassle (think big web site, tons of pages) but by chance I had my own openPopup function that wrapped openedDialog. So I came up with the following hack

$("#dialog").dialog({ focus: function () {
    var dialogIndex = parseInt($(this).parent().css("z-index"), 10);
    $(this).find(".ui-autocomplete-input").each(function (i, obj) {
        $(obj).autocomplete("widget").css("z-index", dialogIndex + 1)
    });
});

Each time the dialog has the focus i.e. on 1st opening and when the auto-complete is closed, each auto-complete list's z-index gets updated.

Auspicate answered 25/7, 2014 at 18:43 Comment(0)

Don't know if this is the best answer, but you can move the autocomplete results after the dialog.

$("#search").autocomplete("widget").insertAfter($("#dialog").parent());

http://jsbin.com/uciriq/4/

Se answered 19/7, 2013 at 20:24 Comment(0)

This has shown up in JQuery UI Versions >= 11.0.0.

Ticket posted here: http://bugs.jqueryui.com/ticket/10696

Edit: Updated ticket number

Kemeny answered 11/11, 2014 at 20:30 Comment(0)

Recommended topics

Hot tags