javascript - 当输入框位于模式内时，HTML ajax 标签不显示

Question

我有一个模态，这个简单的模态:

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

这是 Js 代码:

$('#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]);
    }
});

我的问题是，当开始在输入框中输入时，标签不会显示在模态中，我可以在 firebug 上看到 ajax 请求成功，如果我将输入框放在模态之外，标签显示正常，我什至硬编码“这是标签”进行测试，但仍然没有骰子。

有什么想法吗？

更新:

我相信标签显示在模式框下方，请参阅此示例:

https://jsfiddle.net/5qewtgcr/注意:::::您必须单击 jsfiddle 上的运行才能使标签显示在模式框下方，为什么？我不知道，也许 jsfiddle 有问题，或者我只是我的浏览器。

Answer 1

终于找到答案了:

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

来自:JQuery UI autocomplete for content in bootstrap modal

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