jQueryUI Autocomplete in Bootstrap modal Anzeige unter Modal

Question

Ich habe eine jQueryUI Autovervollständigung in einem Bootstrap-modalen Fenster. Wenn ich es normal in der Seite ausführe, funktioniert es gut, aber wenn ich versuche, es in das Modal hinzuzufügen, erscheint die Liste hinter dem Modal, nicht vorne.

Ich habe versucht, Variationen der folgenden ohne Glück:

$("#myModal").css("z-index", "1500"); 
$("tags'.$fieldname.'").css("z-index", "5000"); 

Im modal:

data-backdrop="false" 

ist die Quelle:

<!-- RFQ Modal --> 
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" style="z-index:2000;"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 

     <div class="modal-body" data-backdrop="false" > 

     <script> 
     $(function ps2() {   

     var availableTagsps2 = [ 
     {label:"3rd It Tech (IS# 20)", value:20},{label:"SeaBreeze Computers (IS# 14)", value:14},{label:"SeaBreeze Computers (IS# 14)", value:14},{label:"SeaBreeze Computers (IS# 14)", value:14},{label:"SeaBreeze Computers (IS# 14)", value:14},{label:"SeaBreeze Computers (IS# 14)", value:14},{label:"SeaBreeze Computers (IS# 14)", value:14} 

     ]; 

     $("#tagsps2").autocomplete({ 
      source: availableTagsps2 

     }); 

    $("#tagsps2").autocomplete({ 
      source: availableTagsps2, 
      select: function ps2(event, ui) { 
      var selectedObj = ui.item; 
      $(this).val(selectedObj.label); 
      $('input[name="ps2"]').val(selectedObj.value); 

      return false; 
     } 

    }); 
/* $("#myModal").css("z-index","6000"); 
$("#tagsps2").css("z-index","20000");*/ 
    }); 

    </script> 

    <input type="text" id="tagsps2" required AutoComplete="off" placeholder="Search..." 
    class="inputMed inline form-control input-med" /> 
    <input type="hidden" name="ps2" value="" /> 

     <div class="row" > 
       <div class="col-md-6"> 
       <form role="form"> 
        <div class="form-group" > 

        <!-- <input type="text" class="form-control" placeholder="Select client" required> --> 
        </div> 

        <button type="submit" class="btn btn-primary btn-lg">Submit</button> 
       </form> 
       </div> 

       <div class="col-md-6"> 

        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
        <a href="dashboard.php?vrfq" class="light">View Sent RFQ's</a> 
        </button> 
       </div> 

     </div> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 

      </div> 
     </div> 
     </div> 
    </div> 
<!-- end modal --> 

    <a href="#" data-toggle="modal" data-target="#myModal"><div class="RightCounter">& nbsp;</div><h2>RFQ</h2></a> 

Answer 1

$("tags'.$fieldname.'").css("zIndex", 5000); 

Answer 2

I hatte ein ähnliches Problem. Versuchen Sie folgendes:

Unterhalb Eingabefeld von Tags, ein div mit id="tags_container" wie folgt hinzu:

<input type="text" id="tagsps2" required AutoComplete="off" placeholder="Search..." class="inputMed inline form-control input-med" /> 
<div id="container_tags"> 
</div> 

Dann fügen Sie folgende CSS:

.ui-autocomplete { 
    position: absolute; 
} 

#container_tags { 
    display: block; 
    position:relative 
} 

Diese Ihre Ausrichtung Problem beheben sollte.

Answer 3

Verwenden von Bootstrap 3.1.1 Ich fand es ausreichend, nur das folgende CSS hinzuzufügen, um die automatische Vervollständigung zu funktionieren.

.ui-autocomplete { 
    z-index: 5000; 
} 

Die Klasse ui-autocomplete ist an die UL angehängt, die intern zur Erstellung der automatischen Vervollständigung verwendet wird. Indem Sie ihm einen verrückten hohen Z-Index geben, stellen Sie effektiv sicher, dass er über allem anderen auf der Seite einschließlich des modalen Dialogs angeordnet wird.

Answer 4

Verwenden appendTo Option stattdessen CSS Änderungen: http://api.jqueryui.com/1.10/autocomplete/#option-appendTo

Answer 5

jQuery Autocomplete eine eingebaute CSS-Klasse für diesen Zweck hat. Fügen Sie einfach die 'ui-front'-Klasse zu einem Container-Element im Bootstrap-Modal hinzu.

jQuery Autocomplete docs

.. die Eltern des Eingabefeldes wird für eine Klasse von ui-Front überprüft werden. Wenn ein Element mit der ui-Front-Klasse gefunden wird, wird das Menü auf dieses Element angefügt wird

Answer 6

Ich brauchte beiden Antworten von glastonbridge und bsandhu um diese Arbeit zu machen, als die ‚ui-Front‘ Klasse Fügt nur einen Z-Index von 100 hinzu.

Auch die "Ui-Front" -Klasse musste auf einem Div sein, das sofort meine Eingabesteuerung umgab, um konsistente Ergebnisse zu erhalten.

Ich verwende BS 3.3.7, jQ 3.1.1 und jQUI 1.12.1.

Answer 7

Was für mich gearbeitet:

<input type="text" id="country" class="form-control" onclick="data()" /> 

und dann in javascript:

 var countries = [ 
    { value: 'Andorra', data: 'AD' }, 
    { value: 'Zimbabwe', data: 'ZZ' } 
    ]; 

    function data(){ 
    $('#country').autocomplete({ 
    lookup: countries, 
    onSelect: function (suggestion) { 
     alert('You selected: ' + suggestion.value + ', ' + suggestion.data); 
    } 
    }); 

    }