Jquery autocomplete suggestions not showing inside a bootstrap modal

Question

My jquery autocomplete is not showing the suggestions list when used inside a bootstrap modal, but is working outside the modal. Why is it happening???? Can anyone help?

<style type="text/css">
        .ui-front {
            z-index:1001;
        }
</style>
<div class="modal fade" id="addform" tabindex="-1" role="dialog">
     <div class="form-line">
       <input type="text" class="form-control"  name="username" id="username" autocomplete="off" required>
      </div>
    </div>
    <script type="text/javascript">
    var base = '<?php echo base_url(); ?>';
    $(document).ready(function(){
    $("#t1").dataTable();
    var menuid = '<?php echo $frmid; ?>';
     $("input#username").autocomplete(base + "/index.php/GulfMasters/AutoComplete?a=" + menuid, {
    width: 120,
     matchContains: true,
      selectFirst: false,
    appendTo: "#addform",
     });
    });
    </script>`;

Suggestions are showing on network tab when I inspect the element , but not showing inside the modal.