Laravel - Input Autocomplete Outside

My options Input autocomplete are out from my input.

Laravel: 5.5

Controller:

$(document).on('focus','.autocomplete_txt_APO',function(){ type = $(this).data('type');

autoType='db_artic';

$(this).autocomplete({ minLength: 0, source: function( request, response ) { $.ajax({ url: "", dataType: "json", data: { term : request.term, type : type, }, success: function(data) { var array = $.map(data, function (item) { return { label: item[autoType], value: item[autoType], data : item } }); response(array) } }); }, select: function( event, ui ) { var data = ui.item.data;
id_arr = $(this).attr('id'); id = id_arr.split("_"); elementId = id[id.length-1]; $('#inp_artic_'+elementId).val(data.db_artic); $('#inp_vrund_'+elementId).val(data.db_vrund); $('#inp_idmat_'+elementId).val(data.db_idmat); } });
});

<table class="table table-bordered">
  <tr>
        <th class="text-center" width="5%">No.</span></th>
        <th class="text-center" width="35%">Material</span></th>
        <th class="text-center" width="12%">Cant</span></th>
        <th class="text-center" width="18%">Vr(UND)</span></th>
        <th class="text-center" width="20%">Vr(TOT)</span></th>
        <th class="text-center" width="10%">Action</span></th>
  </tr>
  <tr>
      ***<td align="center"><span class="badge badge-light" id='sn'>1</span></td>
      <td><input class="form-control autocomplete_txt_APO" autocomplete='off' type='text' 
        data-type="inp_artic" id='inp_artic_1' name='inp_artic[]' 
        placeholder='Ingrese artículo...' required/></td>***

      <td><input class="form-control autocomplete_txt" autocomplete='false' type='number' step='any' 
        data-type="inp_cantd" id='inp_cantd_1' name='inp_cantd[]' 
        placeholder='Cantidad...' required/> </td>

      <td><input class="form-control autocomplete_txt" autocomplete='false' type='number' step='any' 
        data-type="inp_vrund" id='inp_vrund_1' name='inp_vrund[]' 
        placeholder='Valor Unidad...' required/> </td>

      <td><input class="form-control autocomplete_txt" type='number' step='any' 
        data-type="inp_vrtot" id='inp_vrtot_1' name='inp_vrtot[]' 
        placeholder='Valor TOTAL' disabled /> </td>

      <td style="display:none;"><input class="form-control autocomplete_txt" type='number' step='any' 
        data-type="inp_idmat" id='inp_idmat_1' name='inp_idmat[]'/> </td> <!-- colHidden -->

      <td align="center"><button type="button" name="add" id="add" class='btn btn-success addbtn'>+Adicionar</button></td>

    </tr>
    <tfoot>
            <tr>
            <td colspan="5" align="right">&nbsp;</td>
            <td align="center">
              
            <input type="submit" name="save" id="save" class="btn btn-primary" value="Generar" />
            </td>
            </tr>
    </tfoot>
  </table>

image view

via Chebli Mohamed