jQuery-UI autocomplete doesn't display in jQuery-UI dialog
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.
Answer
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.