WordPress

zapytanie wp — filtr wyszukiwania WordPress Ajax przy wyborze listy rozwijanej

  • 29 stycznia, 2023
  • 3 min read
zapytanie wp — filtr wyszukiwania WordPress Ajax przy wyborze listy rozwijanej


Próbuję utworzyć filtr wyszukiwania przy wyborze listy rozwijanej kliknięć, ale nadal nie został osiągnięty, oto mój kod.

Oto kod formularza, który zawiera trzy różne dropdwony

<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>

Oto mój J.S

// 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);
        }
    });
});

a oto moja funkcja

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' );

Czy ktoś może mi pomóc w osiągnięciu filtra wyszukiwania z rozwijanym wyborem za pomocą ajax

Warto przeczytać!  html — spacje przed typem dokumentu


Źródło