Définir le z-index de la valeur de jQuery autocomplete d'entrée à un niveau au-dessus de la liste des résultats lui-même

Le comportement par défaut de jQuery Autocomplete widget est de la position de la liste des résultats d'un z-niveau de l'indice au-dessus de l'entrée, de sorte que celle-ci est toujours visible, mais dans mon cas, cela a l'effet indésirable d'éclipser le texte de l'élément d'entrée.

J'ai essayé de mettre le z-valeur de l'indice de l'élément d'entrée d'au moins un niveau au-dessus de la liste des résultats à partir de l'intérieur de la méthode ouverte comme sans beaucoup de succès:

open: function () {
    setTimeout(function () {
        $(this).css('zIndex', 10000);
    }, 1);
},
close: function () {
    $(this).css('zIndex', 0);
}

Le z-index niveau de l'élément d'entrée est promu à 10000 tandis que celle de la liste des résultats reste au niveau 1, mais l'élément d'entrée s'affiche toujours en dessous.

Quelqu'un a une idée sur le pourquoi de ce qui se passe?
Les attributs de position pour la liste de résultats et l'élément d'entrée sont absolues et relatives, respectivement. Pourrait-il être la cause?

Mais pourquoi? Est-il quelque chose qui est, à tort, qui se chevauchent?
Oui, la zone d'ombre autour de la liste des résultats de la réalité. Je veux garder l'effet d'ombre, mais ne veulent pas le montrer sur le dessus de l'élément d'entrée.
Pouvez-vous compense pas l'ombre d'une façon telle que son visible uniquement sur les bords droit et inférieur?
Je vois que vous êtes en adoptant le principe de BAISER ici Robin. C'est bien, mais je suis aussi la planification de chevauchement de ces deux éléments à la verticale, puis supprimer la bordure inférieure de l'élément d'entrée uniquement, tels que les frontières de fusion de manière transparente ensemble. Cette approche n'aidera pas beaucoup ici malheureusement.
Hmmm.. je vois ce que tu veux dire. Vous souhaitez qu'ils apparaissent comme un contrôle sans faille. Juste assez.

OriginalL'auteur Ziad | 2012-08-23

  1. 23

    Vous pouvez le faire en ajoutant une règle simple pour votre styleseet:

    #your_input {
    position: relative;
    z-index: 10000;
}
.ui-autocomplete {
     z-index: 9999 !important;
}

    Qui doit faire tout le travail, je l'ai testé dans firebug

    L' !important attribut CSS efficacement remplace le z-index, les valeurs définies par jQueryUI mais mon code JS déjà fait. Toutefois merci pour ce qui suggère encore une autre, éventuellement plus simple façon de le faire.
    fait-il faire le travail?
    Il fait un bon travail en inversant le z-index de positionnement relativement les unes aux autres, mais sur le rendu de la page, l'élément d'entrée apparaît toujours en dessous de la liste des résultats:(
    pouvez-vous fournir un lien?
    vous avez une erreur dans votre sélecteur css, il est class alors que l'entrée a id (changement .autocomplete à #autocomplete) Aussi n'oubliez pas d'ajouter position: relative. jsfiddle.net/h4qAC/6

    OriginalL'auteur user907860

  2. 12

    Ce code résolu le problème avec un z-index pour moi (jQueryUI 1.8) sans supplément CSS ou des délais d'attente

    open: function () {
    $(this).autocomplete('widget').zIndex(10);
}
    Cela m'a beaucoup aidé. merci
    Cela semble être une solution plus raisonnable que de simplement en remplaçant la feuille de style css.

    OriginalL'auteur EsterniTY

  3. 0

    Vous n'avez pas vraiment besoin de jouer avec le z-index - 

    .shadow {
  -moz-box-shadow:    2px 2px 2px 1px #ccc;
  -webkit-box-shadow: 2px 2px 2px 1px #ccc;
  box-shadow:         2px 2px 2px 1px #ccc;
}

    DÉMO

    OriginalL'auteur Robin Maben