Ajax WP Query Search Filter is a powerful ajax search engine that let your user perform more precisely search by filtering the search through post type, taxonomy and meta field
search filter using ajax and meta_query with wp_query following this step
1 user the create a search filter
search form :
<form method="POST" action="" id="search_form" enctype="multiple/type">
<h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Key words </font></font></h3>
<div class="select-college-hadding">
<input type="text" name="Keywords" id="Keywords" placeholder="search" class="form-control">
</div>
<a href="javascript:void(0)" onclick="document.search_form.submit()" id="searchsubmit" class="btn_button btn_100">search </a>
</form>
2 using script for ajax call query
script using
<script>
//Script to activate ajax
jQuery(document).ready(function(){
jQuery("#searchsubmit").click(function(e){
e.preventDefault();
var search_val=jQuery("#Keywords").val();
jQuery.ajax({
type:"POST",
url: ajaxurl,
data: {
action:'bts_search',
search_val:search_val,
},
success:function(html){
jQuery('#results-search').html(html);
}
});
});
});
</script>
3 using code in function.php search wp_query with meta query
<?php
//function to setup wp_query
add_action('wp_ajax_bts_search', 'bts_search');
function bts_search(){
global $wp_query;
$search = $_POST['search_val'];
$search_subject = $_POST['search_subject'];
$search_area = $_POST['search_area'];
$search_district = $_POST['search_district'];
$search_territories = $_POST['search_territories'];
$search_outlying_island = $_POST['search_outlying_island'];
$search_week_day = $_POST['search_week_day'];
$search_class_time = $_POST['search_class_time'];
$search_student_level = $_POST['search_student_level'];
$search_gender = $_POST['search_gender'];
$search_autoUpdate = $_POST['search_autoUpdate'];
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
$args = array(
's' => $search,
'post_type'=>'latestcases',
'paged' => $paged,
'post_status' => 'publish',
'posts_per_page' => 5,
'meta_query' => array(
'relation' => 'AND',
array(
'key' => 'course_area',
'value' => $search_area,
'compare' => 'LIKE',
),
array(
'key' => 'kowloon_district',
'value' => $search_district,
'compare' => 'LIKE',
),
array(
'key' => 'subject_is_most_needed',
'value' => $search_subject,
'compare' => 'LIKE',
),
array(
'key' => 'residential_estate',
'value' => array($search_outlying_island),
'compare' => 'LIKE',
),
array(
'key' => 'course_area',
'value' => array($search_territories),
'compare' => 'LIKE',
),
/* array(
'key' => 'week_days_key',
'value' => array($search_week_day),
'compare' => 'LIKE',
),*/
/* array(
'key' => 'course_area',
'value' => array($search_class_time),
'compare' => 'LIKE',
),*/
array(
'key' => 'student_level_section',
'value' => $search_student_level,
'compare' => 'LIKE',
),
array(
'key' => 'student_gender',
'value' => $search_gender,
'compare' => 'LIKE',
),
array(
'key' => 'tuition_fee',
'value' => $search_autoUpdate,
'compare' => 'LIKE',
),
),
);
$wp_query = new WP_Query( $args ); ?>
<div id="results-search" >
<div class="col-md-70 col-sm-60" >
<?php if ( $wp_query->have_posts() ):
while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
<div class="col-md-100" >
<div class="latest-case-box-row">
<div class="latest-case-hadding-row">
<div class="latest-case-hadding-left">
<a href="<?php the_permalink(); ?>"> <h2> <?php the_title(); ?></h2></a>
</div>
<div class="latest-case-hadding-right"> <span class="button_small">
<?php echo human_time_diff_chinese(get_the_time('U'), current_time('timestamp')) . ' ??'; ?> </span> </div>
</div>
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
<div class="massage_search_notfound"><h3> Not Found Search Result</h3> </div>
<?php wp_reset_postdata();
endif; ?>
</div>
</div>
<?php exit; } ?>
I hope All things understand in wp query by Ajax Search in WordPress.