Hello guy I did a filter for posts by name and it filters well but it doesn’t display the result in (.products)
this is image of wp-json link after filter

and this is jquery code:

<script>
  (function($){
    $(document).ready(function(){
      
      $(document).on('change', '#form', function(e) {

        e.preventDefault();

        var search = $(this).serialize();


        var settings = {
           "async": true,
           "crossDomain": true,
           "url": <?php echo wp_json_encode( esc_url_raw( rest_url( 'wl/v1/products?' ) ) ); ?>+search,
           "method": "GET"
         }
         $.ajax(settings).done(function (response) {
          $('.products').html(response);
           console.log(response);
         });

      });
    });
  })(jQuery);
</script>

when I add rest URL + search variable its look like this

http://wordpress.dev.cc/index.php/wp-json/wl/v1/products?search-title=

and now the function code:

add_action('rest_api_init', function() {
  register_rest_route('wl/v1', 'products', [
    'methods' => 'get',
    'permission_callback' => '__return_true',
    'callback' => 'stsearch_products',
  ]);
});


function stsearch_products($data) {

 
  $args = array(
    'post_type'     => 'product', 
    'product', 'posts_per_page' => -1,
    'order'         => 'ASC' // ASC
  );
  $args['s'] = $data['search-title'];

  $query = new WP_Query($args);
    
    if ( $query->have_posts() ) :

      woocommerce_product_loop_start(); 

          while ( $query->have_posts() ) :

              $query->the_post();

              wc_get_template_part( 'content', 'product' );

          endwhile;

      woocommerce_product_loop_end(); 


      do_action( 'woocommerce_after_shop_loop' ); 

      else :

        do_action( 'woocommerce_no_products_found' );

      endif;
 
    return;
}

so please can you help?
i got the result but it doest want to display it in my HTML page or even Console log