Error when doing server data with AJAX

Good morning to the whole community. I'm trying to make a real-time search engine for products, but by the time the browser makes the AJAX request in the keyup event, this happens:

I copied all the HTML back into the DIV I want to send me the server's response.

This is the normal page, before making the request:

This is my JQuery code:

$(document).ready(function() {
  $("#search_buscar_producto").on("keyup", function() {
    var producto = $("#search_buscar_producto").val();
    if (producto != "") {
      buscar_datos(producto);
    }
  });
});
function buscar_datos(product) {
  $.ajax({
    URL: "admin/ajax/buscar_producto_nombre.php",
    //URL: "js/prueba.php",
    type: "POST",
    dataType: "html",
    data: { producto: product }
  })

    .done(function(respuesta) {
      $(".wrap-products").html(respuesta);
      console.log(respuesta);
    })
    .fail(function(respuesta) {
      console.error("error");
    });
}

and this is the page to which the request is made:

<?php
require '../../admin/general/funciones.php';
require '../../admin/general/general.php';

if(isset($_POST['producto'])&&$_POST['producto']!=""){    
    $conexion=conexion();
    $salida = '';
    $sentencia = $conexion->prepare('select * from producto where nombre like concat(?,%)');
    if($sentencia){
        $sentencia->bind_param('i',$_POST['producto']);
        $sentencia->execute();
        $sentencia=$sentencia->get_result();
        $productos->fetch_all(MYSQLI_ASSOC); 
    }
    if($sentencia->num_rows>0){    
        foreach($productos as $producto){
            $salida.="<section>
                <div class='div-image-product'>
                    <img src=". $producto['imagen'].">
                </div>
                <div class='div-tittle-product'>
                    <a href=index.php?id=".$producto['id']."&p=".pagina_actual()."#openModal class='abrir-vista-producto'><p>".$producto['nombre']."</p></a>
                </div>
                <div class='div-price-product'>
                    <label><input type='checkbox' id='chbx_añadir_carrito'>Añadir</label>
                    <p>$".$producto['precio']."</p>
                </div>                            
            </section>";
        } 
          echo $salida;    

    }
}

I even did the test with another file called prueba.php putting only a echo 'funciona' and the result was the same, I put all the code of the whole page in div .

I really have no idea what it might be, since it's the first time I try to use AJAX , and I've looked for problems similar to mine on the Internet, but I can not find anything. I hope you can help me, thank you.