当输入框暗示为模态时,HTML ajax标签不显示

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

本文关键字:ajax HTML 标签 显示 输入 暗示 模态      更新时间:2023-09-26

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

<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上单击run,标签才会显示在模态框下方,为什么?我不知道,也许jsfiddle有问题,或者我的只是我的浏览器。

终于找到了答案:

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

获取自:JQuery UI自动完成引导模式中的内容

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

我已经更新了你的小提琴。这是最新的小提琴,请查收https://jsfiddle.net/5qewtgcr/1/

我在autocomplete div标签中添加了html类:这是jQuery代码:

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