HTML ajax label not showing when the input box is insinde a modal

Question

I have a modal this simple modal:

<div id="mod-quicksend" tabindex="-1" role="dialog" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
            </div>
            <div class="modal-body">
                <div class="text-center">
                    <h4>Selecciona un correo electronico: </h4>
                    <div class="row">
                        <form id="modal-form-close" method="post">
                            <input type="text" hidden value="quicksendquote" name="type">
                            <input type="text" hidden value="{{ $quote->id }}" name="id">
                            <div class="form-horizontal">
                                <div class="col-sm-12 col-sm-offset-4">
                                    <div class="input-group">
                                        <select class="form-control"  name="email[select]">
                                            <option></option>
                                            @foreach($quote->Customer->Contacts as $key)
                                                <option value="{{ $key->email }}">{{$key->email}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <h2>ó</h2>
                                <h3>digita un correo electronico:</h3>
                                <div class="row">
                                    <div class="form-horizontal">
                                        <div class="col-sm-12 col-sm-offset-4">

                                            <div class="input-group">
                                                <input type="text" name="email[type]"  class="form-control" id="getEmail" autocomplete="off" >
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-default">Cerrar</button>
                <button type="button" id="submit" data-dismiss="modal"  class="btn btn-success">Aceptar</button>
            </div>
        </div><!-- /.modal-content-->
    </div><!-- /.modal-dialog-->
</div><!-- /.modal-end-->

and this is the Js code:

$('#getEmail').autocomplete({
    source: function (request, response) {
        $.ajax({
            url: '{{ URL::to('/ajax') }}',
            dataType: "json",
            method: 'post',
            data: {
                name_startsWith: request.term,
                type: 'getEmail'
            },
            success: function (data) {
                response($.map(data, function (item) {
                    var code = item.split("|");
                    return {
                        label: "this is a label",
                        value: code[0],
                        data: item
                    }
                }));
            }
        });
    },
    autoFocus: true,
    minLength: 1,
    select: function (event, ui) {
        var names = ui.item.data.split("|");
        $(this).val(names[0]);
    }
});

My problem is that when start typing in the input box the label doesnt show inside the modal, I can see on firebug that the ajax request is successful and if I place the input box outside the modal the label displays fine, I even hard-coded "this is label" to test and still no dice.

Any ideas?

UPDATE:

I believe the label is showing below the modal box, see this example:

https://jsfiddle.net/5qewtgcr/ NOTE::::: You have to click run on jsfiddle for the label to show below the modal box, why? I dont know, maybe jsfiddle is having problems or my its just my browser.

Answer 1

Finally found the answer:

.ui-autocomplete
{
z-index: 99999; //Maximum and top of everything (not absolutely :| )
}

Got it from: JQuery UI autocomplete for content in bootstrap modal

jsfiddle: https://jsfiddle.net/5qewtgcr/2/

Answer 2

I have update your fiddle. Here is the updated fiddle , please check it https://jsfiddle.net/5qewtgcr/1/

I have add html class in autocomplete div tag : Here is jQuery code :

$('#getEmail').autocomplete({
  source: function(request, response) {
    $.ajax({
      url: 'echo',
      dataType: "json",
      method: 'post',
      data: {
        name_startsWith: request.term,
        type: 'getEmail'
      },
      success: function(data) {
        response($.map(data, function(item) {
          var code = item.split("|");
          return  $(document).find('.input-group-text').append("this is a label" +item + code[0]); 
            /*{
            label: "this is a labelxysxysyxsyxsyxysxysxysyxsyxysxysyxsyxysxysyxsyxysyxysxysyxsyxysxysyxsyxy",
            value: code[0],
            data: item
          }*/

        }));
      }
    });
  },
  autoFocus: true,
  minLength: 1,
  select: function(event, ui) {
    var names = ui.item.data.split("|");
    $(this).val(names[0]);
  }
});