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
Parth Ranjan 2 months 2023-01-29T09:41:24-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse