La saisie semi-automatique jQuery-UI ne s'affiche pas dans la boîte de dialogue jQuery-UI

J'ai un jQueryUI de saisie semi-automatique qui se trouve dans une boîte de dialogue. Pour certaines anciennes versions de jQuery/jQueryUI, il affiche la liste des valeurs retournées, et pour les versions plus récentes, il n'en a pas. En outre, j'ai il fonctionne correctement sur une page avec un tas d'autres trucs en cours, même avec la nouvelle version de jQuery/jQueryUI qui ne semble pas jouer gentil. Évidemment, j'ai quelque chose qui est différent, mais je n'arrive pas à identifier ce qu'il est. Je comprends que je peux utiliser les css pour modifier le z-index, mais cela semble presque un peu hackish.

Veuillez voir la suite de deux exemples.

http://jsbin.com/uciriq/3/ (utilise jQuery 1.4.3 et jQueryUI 1.8.4)

http://jsbin.com/uciriq/2/ (utilise jQuery 1.9.1 et jQueryUI 1.10.3)

Comme on le voit (ou plus applicable a déclaré "ne voit pas"), le retour de la saisie semi-automatique des correspondances pour jQuery 1.9.1/jQueryUI 1.10.3 sont affichées derrière la boîte de dialogue.

Quelle est la meilleure solution pour permettre le retour de la saisie semi-automatique de matchs pour être 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"  />
        <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>

MODIFIER je crois que les changements de jQueryUI Dialogue tel que décrit par http://jqueryui.com/upgrade-guide/1.10/ et reproduits ci-dessous sont la cause de mes problèmes. Je ne suis pas vraiment sûr de savoir comment appliquer au mieux les, et apprécie tous les conseils.

Ajouté appendTo option (n ° 7948) Auparavant, les boîtes de dialogue a toujours été ajoutées au corps pour s'assurer qu'ils ont le dernier élément dans le DOM pour éviter les conflits avec d'autres contextes d'empilement. Toutefois, afin de permettre plus de souplesse et de simplifier la logique d'empilement, un appendTo option a été ajoutée par défaut, dans le corps. Consultez la documentation de l'API pour plus d'informations.

Retiré de la pile option (#8722) les boîtes de dialogue précédemment prise en charge d'une pile option, qui détermine si les boîtes de dialogue doit se déplacer vers le haut quand le concentré. Comme cela devrait toujours être le cas, l'opiton a été supprimé.

Retiré zIndex option (n ° 8729) Similaire à la pile en option, le zIndex option est inutile avec un bon empilement de mise en œuvre. Le z-index est défini dans le CSS et l'empilement est maintenant contrôlé par assurer le dialogue est la dernière "empilement" de l'élément dans son parent.

source d'informationauteur user1032531

24

Modifier votre code pour créer la boîte de dialogue d'abord et ensuite faire de l'auto-complétion. par exemple,
```
$(function()
{
  $("#dialog").dialog();
  $( "#search" ).autocomplete({
    source: [ "one", "two", "three" ]
    });
});
```
Il devrait alors fonctionner correctement, vous permettant de voir les résultats de l'auto-complétion.
5

Un autre hackish réponse. Utiliser les CSS au lieu de jQuery pour modifier le problème de l'enfant.
```
.ui-autocomplete {z-index:1000}
```
http://jsbin.com/uciriq/6/edit
3

Vous avez deviné correctement que z-index/appendTo ont quelque chose à voir avec votre problème.

vous devez définir la appendTo-option de la saisie semi-automatique d'un élément à l'intérieur de la boîte de dialogue, puis la saisie semi-automatique est correctement affiché.

mise en garde: Si le résultat de la liste est plus longue que l'espace disponible à l'intérieur de la boîte de dialogue, vous obtiendrez une barre de défilement.

J'ai édité votre jsbin pour refléter ceci: 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 pour déterrer une vieille question, mais je pense que ça peut aider certaines personnes viennent ici de google (comme moi).
2

Ou pour une autre hackish réponse, vous pouvez utiliser jQuery pour déplacer la position en z. Heureusement, quelqu'un arrive avec une meilleure réponse que mes deux.
```
$("#search").autocomplete("widget").css('z-index',1000);
```
http://jsbin.com/uciriq/5/
2

Changer le z-index ne fonctionne que la première fois, le menu déroulant s'ouvre, une fois fermée, la fenêtre de dialogue se rend compte qu'il a été "trompé" et les mises à niveau de son z-index.

Aussi pour moi de changer l'ordre de la création de la boîte de dialogue auto-remplir était vraiment une corvée (think big site web, des tonnes de pages), mais par chance, j'ai eu mon propre openPopup fonction qui a enveloppé openedDialog. Donc, je suis venu à la suite de 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)
    });
});
```
Chaque fois que le dialogue a le focus, soit le 1er d'ouverture et lors de l'auto-complétion est fermé, chaque auto-liste complète de z-index est mis à jour.
1

Ne sais pas si c'est la meilleure réponse, mais vous pouvez déplacer la saisie semi-automatique des résultats après la boîte de dialogue.
```
$("#search").autocomplete("widget").insertAfter($("#dialog").parent());
```
http://jsbin.com/uciriq/4/
1

Il a montré dans les Versions de JQuery UI >= 11.0.0.

Billet posté ici: http://bugs.jqueryui.com/ticket/10696

Edit: mise à Jour le numéro de billet

Vous devez vous connecter pour publier un commentaire.