jquery Auto-complétion de l'interface utilisateur dans une boîte de dialogue d'interface modale - suggestions non affichées?

Question

J'utilise le widget jquery ui autocomplete dans la boîte de dialogue jquery ui. quand je tape dans le texte de recherche, la zone de texte indente (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 
}); 

société est l'ID de la zone de texte pour attacher la saisie semi-automatique.

Je pensais que ce pourrait être un indice z donc je ceci:

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

mais il ne montre pas encore. Je mets la saisie semi-automatique dans une page "normale" et ça marche bien. J'utilise jquery ui version 1.8.2. des idées d'où regarder?

Answer 1

Je résolu en ajoutant atribute z-index:1500 à mes divs dans jquery.autocomplete.css parce que l'interface utilisateur Dialog Jquery mis z-index entre 1000 et 1005

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

Answer 2

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

Answer 3

Je suis tombé sur cette réponse lorsque je cherchais le même problème, mais aucune des solutions n'était exactement ce que je voulais. En utilisant appendTo travaillé, sorta ... Les éléments de saisie semi-automatique sont apparus là où ils étaient censés, mais ils ont complètement jeté ma fenêtre de dialogue dans un désordre brouillé d'éléments div repositionnés incorrectement.

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 en toute sécurité. Cela fonctionne bien et est conforme aux K.I.S.S. méthode. J'utilise jQuery 1.9.2 avec jQueryUI 1.10.2.

Answer 4

Ajoutez la méthode suivante à votre javascript et l'appeler de l'événement onload de l'élément du corps:

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

Il fonctionne pour moi :) Je suis arrivé en regardant le style calculé de la boîte de dialogue modale à voir ce que c'est z-index était. Donc, toute la fonction est de récupérer la boîte de suggestions automatique créée par jquery (par un de ses noms de classe qui peut être différent pour vous mais l'idée est toujours la même) et de modifier css pour inclure un z-index 1 point plus haut que l'index z de la modale (qui était 1050)

Answer 5

Lors de l'utilisation de jQuery UI 1.10, vous ne devriez pas déranger avec z-indexes (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 de saisie semi-automatique est dans l'ordre DOM correct 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 le problème z-index après un clic dialogue

Le z-index de la saisie semi-automatique semble changer après un clic sur la boîte de dialogue (tel que rapporté par MatteoC). La solution semble ci-dessous pour résoudre ce problème:

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

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

Answer 6

pour une ou multiples autocompletes dans la même boite 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()); 
}); 

Answer 7

J'ai eu récemment la même question. Ajout à mon fichier css résolu pour moi:

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

J'ai d'abord essayé votre valeur z-index initial de 1006, mais cela ne fonctionne pas. Augmenter la valeur a travaillé pour moi.

Answer 8

Cela a fait l'affaire pour moi:

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

Answer 9

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

Note: $ ('# divName') divName sera le nom de l'organisme 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") 
         }); 
        }); 
       } 

Answer 10

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

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

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

Answer 11

Je ressentais le même problème, quand il me vint:

Déclarez toujours votre dialogue avant la mise autocomplete.

Je les ai changés, et voilà! 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 sont affichés derrière la boîte de dialogue ou hors écran.

Answer 12

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 à l'intérieur d'un popup modal où la balise de script et $(document) .ready sont après le code HTML pour le formulaire modal. Après avoir chassé toutes sortes de conflits inexistants et essayer de faire select2 (v 4) dans un combobox, je suis retourné 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 dot-Câlins)

Answer 13

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

Answer 14

Essayez ceci: -
my_modal: id modal
utilisation appendTo prop de autocomplate

$ ("# input_box_id") autocomplete ({
source: sourceArray/link,
. appendTo: "# my_modal"
});

Référence:https://stackoverflow.com/a/22343584/5803974

Answer 15

Johann-S 'réponse here a fonctionné pour moi.

simplement ajouter des données de mise au point = « false » au bouton ou un 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 ne devez pas salir avec z-index ou override bootstrap de mettre en vigueur mise au point (ce n'est pas Appelez)