web-dev-qa-db-fra.com

jQueryUI autocomplete en Bootstrap modal affichant sous modal

J'ai une saisie semi-automatique jQueryUI dans une fenêtre modale Bootstrap. Lorsque je le lance normalement dans la page, cela fonctionne bien, mais lorsque je l’ajoute au modal, la liste apparaît derrière le modal, pas devant.

J'ai essayé des variantes des éléments suivants sans succès:

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

Dans le modal:

data-backdrop="false"

Voici la source:

<!-- 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>
jquerytwitter-bootstrapautocompletejqmodal
17
FstaRocka

À l’aide de Bootstrap 3.1.1, j’ai trouvé suffisant d’ajouter le CSS suivant pour que la saisie semi-automatique fonctionne.

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

La classe ui-autocomplete est attachée à l'UL qui est utilisée en interne pour construire l'auto-complétion. En lui donnant un indice z élevé, vous vous assurez effectivement qu'il sera placé au-dessus de tout le reste de la page, y compris le dialogue modal.

45
glastonbridge

jQuery autocomplete a une classe CSS intégrée à cet effet. Ajoutez simplement la classe 'ui-front' à un élément conteneur dans le modal Bootstrap.

Documentation jQuery Autocomplete

.. les parents du champ de saisie seront vérifiés pour une classe de Ui-front. Si un élément de la classe ui-front est trouvé, le menu sera ajouté à cet élément

22
bsandhu

Utilisez l'option appendTo à la place des modifications CSS: http://api.jqueryui.com/1.10/autocomplete/#option-appendTo

1
Sergey

Ce qui a fonctionné pour moi:

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

puis en 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);
    }
   });

   }
1
ainos
$("tags'.$fieldname.'").css("zIndex", 5000);
1
never giveup

J'ai eu un problème similaire. Essayez d'ajouter ce qui suit:

Sous le champ de saisie des balises, ajoutez un div avec id="tags_container" comme ceci:

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

Ajoutez ensuite les css suivants:

.ui-autocomplete {
    position: absolute;
}

#container_tags {
    display: block; 
    position:relative
}

Cela devrait résoudre votre problème d'alignement.

0
Tushar Maroo

J'avais besoin des deux réponses de glastonbridge et de bsandhu pour que cela fonctionne, car la classe 'ui-front' ajoute seulement un indice z de 100.

En outre, la classe "ui-front" devait être sur une div qui enveloppait immédiatement mon contrôle d'entrée pour obtenir des résultats cohérents.

J'utilise BS 3.3.7, jQ 3.1.1 et jQUI 1.12.1.

0
Eric