我碰到一个有趣的问题与jQueryUI自动完成在对话框中。
我的对话框HTML看起来像这样:
<div id="copy_dialog"> <table> <tbody> <tr> <th>Title:</th> <td><input type="text" class="title" name="title"></td> </tr> <tr> <th>Number:</th> <td><input type="text" name="number"></td> </tr> </tbody> </table> </div>
当我对上面的HTML运行jQueryUI自动完成,它工作完美。
当我使用对话框打开它
$('#copy').click(function() { $('#copy_dialog').dialog({ autoOpen: true,width: 500,modal: false,zIndex: 10000000,title: 'Duplicate',buttons: { 'Cancel': function() { $(this).dialog('close'); },'Save': function() { $(this).dialog('close'); } } }); return false; });
然后在FireBug,我可以看到自动完成仍然工作。它是请求和接收结果,但我不再在输入字段下方看到选项列表。
我的想法是,这与zIndex的对话框有关,远远大于自动完成菜单给出,但我不知道肯定。
我仍在研究发生什么的确切细节,但我希望有人在这里会有我的想法。
编辑
我试图从对话框中删除zIndex,我的自动完成开始显示。
不幸的是,我需要zIndex值来获得可怕的高zIndex的菜单,我不能改变(没有访问该区域的代码)。所以如果有一个方法来添加一个zIndex到自动完成,这将是太棒了;直到那时,我可能只是从对话框中删除zIndex,并确保它不会显示在菜单区域周围。