Display search result on the same page of the search box - php

Question

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