open - jquery ui autocomplete select

jQueryUI se completa automáticamente en el modo Bootstrap que se muestra debajo del modo modal

Question

Tengo un autocompletado jQueryUI en una ventana modal de Bootstrap. Cuando lo ejecuto normalmente en la página funciona bien, pero cuando intento agregarlo al modal, la lista aparece detrás del modal, no al frente.

He intentado variaciones de los siguientes sin suerte:

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

En el modal:

data-backdrop="false"

Aquí está la fuente:

<!-- 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

Lo que funcionó para mí:

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

y luego 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);
    }
   });

   }

Answer 2

Necesité las dos respuestas de glastonbridge y bsandhu para hacer que esto funcionara, ya que la clase ''ui-front'' solo agrega un índice z de 100.

Además, la clase "ui-front" tenía que estar en un div que inmediatamente envolvía mi control de entrada para obtener resultados consistentes.

Estoy usando BS 3.3.7, jQ 3.1.1 y jQUI 1.12.1.

Answer 3

Tuve un problema similar Intenta agregar lo siguiente:

Debajo del campo de entrada de etiquetas, agregue un div con id="tags_container" como este:

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

Luego agregue el siguiente css:

.ui-autocomplete {
    position: absolute;
}

#container_tags {
    display: block; 
    position:relative
}

Esto debería solucionar su problema de alineación.

Answer 4

Usando Bootstrap 3.1.1 encontré suficiente solo para agregar el siguiente CSS para que funcione el autocompletado.

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

La clase ui-autocomplete se adjunta a la UL que se usa internamente para construir el autocompletar. Al darle un alto índice z loco, se asegura de manera efectiva que se distribuya por encima de todo lo demás en la página, incluido el diálogo modal.

Answer 5

Use la opción appendTo en lugar de las modificaciones de css: http://api.jqueryui.com/1.10/autocomplete/#option-appendTo

Answer 6

jQuery autocompletar tiene una clase CSS incorporada para este propósito. Simplemente agregue la clase ''ui-front'' a un elemento contenedor en el modo Bootstrap.

jQuery Autocompletar documentos

.. los padres del campo de entrada serán revisados ​​para una clase de ui-front. Si se encuentra un elemento con la clase ui-front, el menú se agregará a ese elemento

Answer 7

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