Jquery-ui autocomplete in bootstrap modal

Question

The list of autocomplete jquery-ui is shown behind the modal as seen in the image, is there any way to take it to the front of the modal to be able to select it?

This is my modal where is the input that will get the data to autocomplete that are from a database

    <div id="modalCart" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
          <form id="myForm" action="" method="post" class="form-horizontal">
            <table class="table table-hover">
                <thead>
                   <tr>
                        <th>Cliente</th>
                        <th class="text-center">Fecha de venta</th>
                        <th class="text-center">Tipo de venta</th>
                        <th class="text-center">A cuenta</th>
                   </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="col-sm-1 col-md-1" style="text-align: center">
                            <input type="text" name="txtCliente" id="cliente" class="form-control">
                        </td>
                        <td class="col-sm-1 col-md-2 text-center" name="txtFecha" ><strong><?php echo date("Y-m-d");?></strong>
                        </td>
                        <td class="col-sm-1 col-md-2 text-center">
                            <select class="form-control" id="txtOption" name="txtOption">
                            <option value="contado"><stong>Contado</stong></option>
                            <option value="credito"><strong>Credito<strong></option>
                            </select>
                        </td>
                        <td class="col-sm-1 col-md-1" style="text-align: center">
                            <input type="text" name="txtCount" class="form-control" style="width:100px" id="txtCount" disabled="true" maxlength="8">
                        </td>
                  </tr>
                  <tr id="finalize">
                  </tr>
               </tbody>
            </table>
          </form>
          </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Continuar vendiendo</button>
        <button type="button" id="btnSaveCart" class="btn btn-primary">Finalizar venta</button>
      </div>  

      </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

This is my function java script

$('#cliente').click(function(){
                 $.ajax({
                        type:       'ajax',
                        url :       '<?php echo base_url()?>usuario/showCliente',
                        async:      false,
                        dataType:   'json',
                        success: function(data){
                            var nombre = new Array();
                            var i;
                            for(i=0;i<data.length;i++){
                                nombre.push(data[i].usr_nombre);
                            }
                            $('#cliente').autocomplete({
                                source: nombre
                            });
                        }
                 });
            });

Este es el enlace del ejemplo usado de jquery enter link description here