Jquery-ui在bootstrap模式中自动完成

Question

自动完成jquery-ui列表显示在模态后面，如图所示，有没有办法将它带到模态的前面才能选择它？

这是我的模态，其中输入将使数据自动完成来自数据库

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

这是我的函数java脚本

$('#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