If I’m understanding this correctly, the issue seems to lie in the HTML form action attribute, where you’re posting to admin-ajax.php. Because of this, your page is being redirected to that URL. Instead, you should prevent the form submission from redirecting the page by using JavaScript.
Your JavaScript code should be like:
<script>
jQuery(function($){
$('#filter').on('submit', function(e){
e.preventDefault(); // Prevent the form from redirecting to a new page
var filter = $(this);
$.ajax({
url: '<?php echo admin_url('admin-ajax.php'); ?>', // The AJAX PHP handler
data: filter.serialize(),
type: 'POST',
beforeSend: function(xhr) {
filter.find('button').text('Applying Filters...');
},
success: function(data) {
filter.find('button').text('Apply filters');
$('#response').html(data);
},
error: function() {
filter.find('button').text('Apply filters');
$('#response').html('An error occurred');
},
});
});
});
</script>
With the above changes, your AJAX request should run on the current page without refreshing or redirecting, and then it should populate the #response div with the data returned by your AJAX request.