jQuery自动完成不使用模态

时间:2016-04-20 21:12:15

标签: javascript jquery css jquery-autocomplete

嗨,我知道这个问题已被多次询问,但我找到的所有解决方案都不适合我......

我能够发出ajax请求并且我得到了回复但是模板内部的模式中的自动完成菜单是不可见的。正如建议我尝试更改z-index并进行修改但它们不起作用......下面是我的代码

$("#startDestination").autocomplete({
  appendTo: "#createRequest",
  /*close: function (event, ui){
        $("#startDestination").autocomplete("option","appendTo","#detailsModal");  // <-- and do this  
    }*/
});
//   $("#startDestination").autocomplete("option", "appendTo", "#detailsModal");

$("#startDestination").autocomplete({
        source: function (request, response) {
         $.ajax({
            url:"http://gd.geobytes.com/AutoCompleteCity?callback=?&q="+request.term,
            dataType: "json",
            function (data) {
             response(data);
            }
         });
        },
        minLength: 3,
        select: function (event, ui) {
         var selectedObj = ui.item;
        getcitydetails(selectedObj.value);
         $("#startDestination").val(selectedObj.value);
         return false;
        },
        open: function () {
         $("#startDestination").removeClass("ui-corner-all").addClass("ui-corner-top");
        },
        close: function () {
         $("#startDestination").removeClass("ui-corner-top").addClass("ui-corner-all");
        }
     });

我还尝试使用appendTo并将其附加到模态的div元素。

以下是模板中模态的代码

    <div class="col-sm-6">
                <div class="form-group">
                <div id="test">
                    <label>Departure Destination</label>
                    <span class="input-icon input-icon-right">
                        <input type="text" name="startDestination_1" id="startDestination" class="form-control" ></input>
                    </span>
                </div>

                </

我的style.css

.ui-autocomplete{
    font-family: 'open sans', sans-serif;
 z-index:2147483647 !important;    
    font-size: 16px;
}

我的jquery-ui.css

.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    cursor: default;
     z-index:2147483647 !important;

}

.ui-front {
    z-index: 2147483647;
}

任何帮助都将不胜感激。

提前谢谢。

0 个答案:

没有答案