wp query – WordPress Ajax search filter on dropdown select
Question
I am trying to create search filter on click dropdown selection, but still not achieved, here is my code.
Here is form code, which contains three different dropdwon
<form id="filter-form">
<label for="taxonomy-select">Select Company</label>
<select id="taxonomy-select1" name="taxonomy">
<option value="">All</option>
<?php
$taxonomy_terms = get_terms( array(
'taxonomy' => 'job_type',
'hide_empty' => false,
) );
foreach ( $taxonomy_terms as $term ) {
echo '<option value="'.$term->slug.'">'.$term->name.'</option>';
}
?>
</select>
<label for="custom-field-select">Select Location</label>
<select id="taxonomy-select2" name="custom_field">
<option value="">All</option>
<?php
$taxonomy_terms = get_terms( array(
'taxonomy' => 'job_location',
'hide_empty' => false,
) );
foreach ( $taxonomy_terms as $term ) {
echo '<option value="'.$term->slug.'">'.$term->name.'</option>';
}
?>
</select>
<label for="custom-field-select">Select Job Title</label>
<select id="taxonomy-select3" name="custom_field">
<option value="">All</option>
<?php
$taxonomy_terms = get_terms( array(
'taxonomy' => 'job_title',
'hide_empty' => false,
) );
foreach ( $taxonomy_terms as $term ) {
echo '<option value="'.$term->slug.'">'.$term->name.'</option>';
}
?>
</select>
</form>
Here is my JS
// Listen for changes to the select dropdowns
jQuery('#taxonomy-select1, #taxonomy-select2, #taxonomy-select3').change(function(){
// Collect the selected options from each select dropdown
var company = jQuery('#taxonomy-select1').val();
var location = jQuery('#taxonomy-select2').val();
var title = jQuery('#taxonomy-select3').val();
// Send an AJAX request to the server
jQuery.ajax({
url : my_ajax_object.ajax_url,
type : 'post',
data : {
action : 'search_filter',
company : company,
location : location,
title : title
},
success : function( response ) {
// Update the results on the page
jQuery('#results').html(response);
}
});
});
and here is my function
function search_filter_callback(){
$company = $_POST['company'];
$location = $_POST['location'];
$title = $_POST['title'];
$tax_query = array('relation' => 'AND');
if(!empty($company)){
$tax_query[] = array(
'taxonomy' => 'job_type',
'field' => 'slug',
'terms' => $company,
);
}
if(!empty($location)){
$tax_query[] = array(
'taxonomy' => 'job_location',
'field' => 'slug',
'terms' => $location,
);
}
if(!empty($title)){
$tax_query[] = array(
'taxonomy' => 'job_title',
'field' => 'slug',
'terms' => $title,
);
}
$args = array(
'post_type' => 'job',
'tax_query' => $tax_query
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
// Return the post in the desired format
echo '<h2>' . get_the_title() . '</h2>';
}
} else {
echo 'No posts found.';
}
wp_reset_postdata();
die();
}
add_action( 'wp_ajax_search_filter', 'my_search_filter_callback' );
add_action( 'wp_ajax_nopriv_search_filter', 'my_search_filter_callback' );
function my_enqueue() {
wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/assets/js/scripts-aj.js', array('jquery') );
wp_localize_script( 'ajax-script', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );
Can anyone help me to achieve on dropdown selection search filter with ajax
0
2 months
2023-01-29T09:41:24-05:00
2023-01-29T09:41:24-05:00 0 Answers
0 views
0
Leave an answer