Display search result on the same page of the search box

I am trying to build a component that looks like a WooCommerce product page, it should have a filter(category), a search box, and pagination, and a dropdown that users can select how many posts they want to display on the page. Currently, I am using ajax and a jQuery plugin called twbs-pagination to build this function, the code looks awful, and is not organized. I am wondering if timber has a native way to do it.

JS FILE

jQuery(document).ready(function ($) {

  function ftGetPost(page = 1) {
    $.ajax({
      type: 'GET',
      url: ajaxurl,
      dataType: 'JSON',
      data: {
        'action': 'flatsome_get_posts',
        'paged': page,
        'category': $('#ft-category').val(),
        'keyword': $('input[name=ft-keyword]').val(),
      },
      success: function (data) {
        console.log(data);
        $('#ft-block__posts-holder').empty().html(data.data.posts);

        $('#ft-block__pager').twbsPagination({
          totalPages: data.data.pages,
          visiblePages: 7,
          onPageClick: function (event, page) {
            ftGetPost(page);
          },
        });
      },
    });
  }

  ftGetPost();

  $('#ft-category').change(function () {
    ftGetPost();
  });

  $('#ft-do-search').click(function () {
    ftGetPost();
  });

});

PHP FILE

//fetch books from wp
add_action('wp_head', function () {
?>
  <script type="text/javascript">
    //<![CDATA[
    ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
    //]]> 
  </script>
<?php
}, 1);


add_action('wp_ajax_flatsome_get_posts', 'flatsome_get_posts');
add_action('wp_ajax_nopriv_flatsome_get_posts', 'flatsome_get_posts');
function flatsome_get_posts()
{
  $paged          = $_GET['paged'] ?? 1;

  $posts_per_page = 4;


  $args = [
    'post_type'      => 'books',
    'paged'          => $paged,
    'posts_per_page' => $posts_per_page,
  ];

  $ft_query = new WP_Query($args);

  $html = '';

  if ($ft_query->have_posts()) {
    foreach ($ft_query->get_posts() as $post) {
      $html .= '<div class="ft_post">';

      $html .= '<div class="ft-post__image">';
      if (has_post_thumbnail()) {
        $html .= get_the_post_thumbnail($post->ID, 'full');
      }
      $html .= '</div>';

      $html .= '<h3 class="ft-post__title" style="white-space:normal;">';
      $html .= $post->post_title;
      dump($post->post_title);
      die();
      $html .= '</h3>';
      $html .= "<p>";
      $html .= trim($post->post_content);
      $html .= "</p>";
      $html .= '</div>';
    }
  }

  $posts = ob_get_clean();

  wp_send_json_success([
    'posts' => $html,
    'pages' => $ft_query->max_num_pages,
  ]);

  exit;
}

<div class="ft-block">
    <div class="ft-block__header">
        <label for="ft-category">Filter By</label>
        <select name="category" id="ft-category">
          <option value="" disabled selected>CATEGORIES</option>
          <option value="BOOKS">BOOKS</option>
          <option value="PODCAST">PODCAST</option>
        </select>


        <label>
            <input type="search" name="ft-keyword">
            <button id="ft-do-search">Search</button>
        </label>
    </div>

    <div id="ft-block__posts-holder">
        
    </div>

    <div class="ft-block__footer">
        <div id="ft-block__pager"></div>
    </div>
</div>

TWIG Template