jQuery Autocomplete not working with modal

Question

Hi I know this question has been asked many times but all the solutions I found are not working for me ....

I am able to make the ajax request and I am getting the response back but the autocomplete menu which is in a modal inside a template is not visible. As suggested i tried changing the z-index and made modifications but they did not work ... Below is my code

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

I have also tried to use appendTo and attach it to div elements of the modal.

Below is the code for my modal in a template

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

                </

my style.css

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

my jquery-ui.css

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

}

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

Any help would be appreciated.

Thank you in advance.