web-dev-qa-db-fra.com

jquery UI autocomplete dans une boîte de dialogue d'interface utilisateur modale - les suggestions ne s'affichent pas?

j'utilise le widget jquery ui autocomplete dans la boîte de dialogue jquery ui. Lorsque je tape dans le texte de recherche, la zone de texte met en retrait (ui-autocomplet-loading) mais ne montre aucune suggestion.

var availableTags = ["c++", "Java", "php", "coldfusion", "javascript", "asp", "Ruby", "python", "c", "scala", "groovy", "haskell", "Perl"];

$("#company").autocomplete({        
    source : availableTags ,
minLength: 2
});

company est l'id de la zone de texte à laquelle joindre la saisie semi-automatique.

je pensais que cela pourrait être un index z, donc je règle ceci:

.ui-autocomplete, .ui-menu, .ui-menu-item {  z-index: 1006; }

mais ça ne se voit toujours pas. Je mets l'auto-complétion dans une page 'normale' et cela fonctionne bien.

j'utilise jquery ui version 1.8.2. des idées d'où regarder?

jquery-uijquery-ui-dialogjquery-ui-autocomplete
21
mango

Je suis tombé sur cette réponse en cherchant le même problème, mais aucune des solutions ne correspondait exactement à ce que je voulais.

Utiliser appendTo fonctionnait, tria ... Les éléments de saisie semi-automatique se trouvaient là où ils étaient censés être, mais il a complètement jeté ma fenêtre de dialogue dans un fouillis brouillé d'éléments div mal repositionnés.

Donc, dans mon propre fichier css, j'ai créé ce qui suit:

ul.ui-autocomplete {
    z-index: 1100;
}

Je suis sûr que 1100 est un peu exagéré, mais je voulais juste jouer la sécurité. Cela fonctionne bien et est conforme à la K.I.S.S. méthode.

J'utilise jQuery 1.9.2 avec jQueryUI 1.10.2.

61
DondeEstaMiCulo

Lors de l'utilisation de jQuery UI 1.10, vous ne devriez pas déranger avec les index z ( http://jqueryui.com/upgrade-guide/1.10/#removed-stack-option ). L'option appendTo fonctionne, mais limitera l'affichage à la hauteur de la boîte de dialogue. 

Pour résoudre ce problème: assurez-vous que l'élément autocomplete est dans le bon ordre DOM avec: autocomplete. InsertAfter (dialogue. Parent ())

Exemple 

 var autoComplete,
     dlg = $("#copy_dialog"),
     input = $(".title", dlg);

 // initialize autocomplete
 input.autocomplete({
     ...
 });

 // get reference to autocomplete element
 autoComplete = input.autocomplete("widget");

 // init the dialog containing the input field
 dlg.dialog({
      ...
 });

 // move the autocomplete element after the dialog in the DOM
 autoComplete.insertAfter(dlg.parent());

Mise à jour pour un problème d'index z après un dialogue, cliquez sur

L'indice z de la saisie semi-automatique semble changer après un clic sur la boîte de dialogue (comme indiqué par MatteoC). La solution ci-dessous semble résoudre ce problème:

Voir le violon: https://jsfiddle.net/sv9L7cnr/

// initialize autocomplete
input.autocomplete({
    source: ...,
    open: function () {
        autoComplete.zIndex(dlg.zIndex()+1);
    }
});
11
mhu

pour un ou plusieurs autocomplets dans la même boîte de dialogue:

// init the dialog containing the input field
 $("#dialog").dialog({
      ...
 });

// initialize autocomplete
 $('.autocomplete').autocomplete({        
      source: availableTags,
      minLength: 2
 }).each(function() {
      $(this).autocomplete("widget").insertAfter($("#dialog").parent());
 });
7
Jader A. Wagner

Je l'ai résolu dans le bootbox comme ceci:

$( "#company" ).autocomplete({       
    source : availableTags ,
    appendTo: "#exportOrder"
});

Il vous suffit d'ajouter la liste des résultats à votre formulaire.

4
Allfarid Morales García

J'ai résolu l'ajout de l'attribut z-index:1500 à mes divs dans Jquery.autocomplete.css car la boîte de dialogue Jquery UI mettait l'indice z entre et 1000.

ul.auto-complete-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 1500;
    max-height: 250px;
    overflow: auto;
}
3
kachar

Dans votre implémentation autocomplete, ajoutez appendTo: "#search_modal", où search_modal est l'ID de votre modal.

3
Francisco Balam
    $("#company").autocomplete({        
    source : availableTags ,
    appendTo : $('#divName')
    minLength: 2
});

Remarque: $ ('# divName') divName sera le nom du corps modal.

EXEMPLE:

<form id="exportOrder">
        <div class="input-group">
            <input type="text" id="accountReferenceSearch" placeholder="Type Account Reference to search..." class="form-control" style="width:500px">
        </div>
    </div>
</form>

self.AttachAutoComplete = function () {
                    $('#accountReferenceSearch').focus(function () {
                        $('#accountReferenceSearch').autocomplete({
                            source: function (request, response) {},
                            minLength: 2,
                            delay: 300,
                            appendTo: $("#exportOrder")
                        });
                    });
                }
2
Parth Patel

J'ai eu récemment le même problème. Ajouter ceci à mon fichier css l'a résolu pour moi: 

.ui-autocomplete-input, .ui-menu, .ui-menu-item {  z-index: 2006; }

J'ai d'abord essayé votre valeur initiale z-index de 1006, mais cela n'a pas fonctionné. Augmenter la valeur a fonctionné pour moi. 

2
Anders

On avait le même problème. Nous venons de mettre à jour notre fichier CSS afin que z-index soit suffisamment élevé et ne puisse pas être écrasé:

.dropdown-menu {
  z-index: 9999 !important;
}

Comme ajouter au corps rend l'enfant de la liste déroulante $ fenêtre, vous devez créer tous les menus déroulants dans le nouvel index z. 

1
farpaci

Dans mon cas, ajouter des styles en CSS ne fonctionne pas, mais après avoir ajouté la propriété zIndex exactement au constructeur de l'élément jQuery ui, cela fonctionne comme un charme.

1
Robert Isaev

J'ai aussi eu ce problème. Je travaille dans UserFrosting qui a bootstrap et select2, mais n'a pas jquery-ui dans le noyau. Mon autocomplete était dans une fenêtre contextuelle modale où la balise de script et $(document). Ready sont après le code HTML pour le formulaire modal. Après avoir poursuivi toutes sortes de conflits inexistants et essayé de transformer select2 (v 4) en une liste déroulante, je suis revenu au hack css et cela a fonctionné:

.ui-autocomplete {z-index: 1061 !important;}

Mon environnement est 

  • UserFrosting avec jquery 1-11.2
  • bootstrap-3.3.2,
  • bootstrap-modal
  • select2 v3.5.1
  • jquery-ui-1.11.4 (thème point-luv)
1
TauranJanitor

J'ai le même problème, mais après quelques difficultés, j'utilise Firefox pour trouver une solution.

En chrome, lorsqu'une vue de saisie semi-automatique est ouverte et que vous souhaitez inspecter l'élément, celui-ci disparaît lorsque vous cliquez sur un composant.

mais

Dans Firefox, cela sera affiché en permanence afin que nous puissions trouver la vue du tout.

et j'ai fait la même chose avec cela, et j'ai trouvé une classe qui est d'avoir z-index

z-index: 1000

donc je viens de changer cela en plus comme

.pac-container{
    z-index: 999999;
}

peut-être que cette solution z-index ne fonctionnera pas pour vous tous, mais je suis sûr que la fonctionnalité de Firefox vous aidera certainement à trouver la meilleure solution.

1
Dev Sabby

Cela a fait le tour pour moi:

ul.ui-front {
    z-index: 1100;
}
1
Zeljko Kozina

Ajoutez la méthode suivante à votre javascript et appelez-la à partir de l'événement onload de l'élément body:

//initialization
function init(){
    var autoSuggestion = document.getElementsByClassName('ui-autocomplete');
    if(autoSuggestion.length > 0){
        autoSuggestion[0].style.zIndex = 1051;
    }
}

Cela fonctionne pour moi :) J'ai obtenu ceci en regardant le style calculé du dialogue modal pour voir ce que c'était z-index. Ainsi, la fonction consiste à saisir la boîte de suggestions automatique créée par jquery (par l’un de ses noms de classe qui peuvent être différents mais que l’idée est toujours la même) et modifier son css pour inclure un index z supérieur de 1 point à le z-index du modal (qui était 1050)

0
Corey Harden

La réponse de Johann-S ici a fonctionné pour moi. 

ajoutez simplement data-focus = "false" au bouton ou au lien appelant le modal comme 

<button type="button" class="btn btn-primary" 
 data-toggle="modal" 
 data-focus="false"
data-target=".bd-example-modal-sm">Small modal</button>

De cette façon, vous n'avez pas à vous soucier des index z ou à remplacer le focus d'application de bootstrap (ce n'est pas appelé)

0
JHRS

J'éprouvais le même problème quand il m'est venu à l'esprit:

Déclarez toujours votre boîte de dialogue AVANT la configuration de la saisie semi-automatique.

Je les ai échangés, et le tour est joué!

La saisie semi-automatique se configure autour de l'entrée que vous ciblez. La boîte de dialogue crée un nouveau balisage et CSS autour du conteneur que vous ciblez. Mes choix apparaissaient derrière la boîte de dialogue ou hors écran.

0
Charles St-Pierre

Essaye ça:-
mon_modal : identifiant modal
Utilisez la propriété appendTo de autocomplete

$("#input_box_id").autocomplete({<br> source:sourceArray/link,<br> appendTo :"#<i>my_modal</i>"<br> }); référence: https://stackoverflow.com/a/22343584/5803974

0
Satish