Filter by mata Query


<form action="" method="get">
	<select name="jobserch" id="jobserch">
		<option value="">select</option>
		<option value="BCA">BCA</option>
		<option value="MCA">MCA</option>
		<option value="CA">CA</option>
	</select>
	<input type="submit" value="filter">
</form>
<?php 

if($_GET['jobserch'] && !empty($_GET['jobserch']))
{
	$serjob = $_GET['jobserch']; 
}

  $args = array(
        'post_type' => 'post',
        'posts_per_page' => -1,
        'post_status' => 'publish',
         'meta_query'  => array(
            array(
                'key'     => 'job_type',
                'value'   =>$serjob,
               	'compare' => 'LIKE'
            )
        )
         );

$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) { ?>
    <ul class="mani-li">
    <?php while ( $the_query->have_posts() ) {
        $the_query->the_post(); ?>
        <li class="<?php the_field('job_type')?>">
       <div > 
       		<p><?php echo get_the_title(); ?></p>
            <p><?php the_field('job_type'); ?></p>
   		</div> 
       <?php  } ?>
   	</li>
   	</ul>
	<?php } ?>

<script type="text/javascript">
	jQuery('#jobserch').on('change', function() {
		var $thiss = jQuery(this).val();
		if(!$thiss){
			jQuery('.mani-li li').show();
		}else{
			jQuery('.mani-li li').hide();
			jQuery('.'+$thiss).show();
		}
		
	});	


</script>
-----------------------------------------
   <div class="career_filter_section">
          <?php 
          $job_list[] = $job_list;
          while(have_rows('career_jobs_repeater')): the_row(); 
          array_push($job_list, get_sub_field('job_type_list') );
          endwhile; 
          $single_job = array_unique($job_list);
          ?>
          <select class="form-control" id="filter-careers-type">
            <option value="All">All</option> 
            <?php foreach ($single_job as $job){ ?>
              <option value="<?php echo $job; ?>"><?php echo $job; ?></option>
            <?php } ?>
          </select>
                            
                </div>


<ul class="testk">
            <?php while(have_rows('career_jobs_repeater')): the_row();?>
            <li class="job_type" data-type="<?php the_sub_field('jobs_type');?>">
              <div class="jobs_title_left">
                <h3><a href="<?php the_sub_field('apply_now_button_url');?>"><?php the_sub_field('jobs_title');?></a>, <span><?php the_sub_field('jobs_location');?></span></h3>
                <span><?php the_sub_field('jobs_type');?></span>
              </div>
              <div class="jobs_apply_button">
                <a href="<?php the_sub_field('apply_now_button_url');?>"><?php the_sub_field('apply_now_button_title');?></a>
              </div>
            </li>
          <?php endwhile;?>
          </ul>

   <style type="text/css">
  #filter-careers-type option:empty {
    display: none;
}
</style>
<script type="text/javascript">
    $("#filter-careers-type").change(function() {
    var filterValue = $(this).val();
    var job_type = $('.job_type'); 
      
    job_type.hide()
    job_type.each(function(i, el) {
         if($(el).attr('data-type') == filterValue) {
             $(el).show();
         }
    })
<form action="" method="get">
	<select name="jobserch" id="jobserch">
		<option value="">select</option>
		<option value="BCA">BCA</option>
		<option value="MCA">MCA</option>
		<option value="CA">CA</option>
	</select>
	<input type="submit" value="filter">
</form>
<?php 

if($_GET['jobserch'] && !empty($_GET['jobserch']))
{
	$serjob = $_GET['jobserch']; 
}

  $args = array(
        'post_type' => 'post',
        'posts_per_page' => -1,
        'post_status' => 'publish',
         'meta_query'  => array(
            array(
                'key'     => 'job_type',
                'value'   =>$serjob,
               	'compare' => 'LIKE'
            )
        )
         );

$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) { ?>
    <ul class="mani-li">
    <?php while ( $the_query->have_posts() ) {
        $the_query->the_post(); ?>
        <li class="<?php the_field('job_type')?>">
       <div > 
       		<p><?php echo get_the_title(); ?></p>
            <p><?php the_field('job_type'); ?></p>
   		</div> 
       <?php  } ?>
   	</li>
   	</ul>
	<?php } ?>

<script type="text/javascript">
	jQuery('#jobserch').on('change', function() {
		var $thiss = jQuery(this).val();
		if(!$thiss){
			jQuery('.mani-li li').show();
		}else{
			jQuery('.mani-li li').hide();
			jQuery('.'+$thiss).show();
		}
		
	});	


</script>
-----------------------------------------
   <div class="career_filter_section">
          <?php 
          $job_list[] = $job_list;
          while(have_rows('career_jobs_repeater')): the_row(); 
          array_push($job_list, get_sub_field('job_type_list') );
          endwhile; 
          $single_job = array_unique($job_list);
          ?>
          <select class="form-control" id="filter-careers-type">
            <option value="All">All</option> 
            <?php foreach ($single_job as $job){ ?>
              <option value="<?php echo $job; ?>"><?php echo $job; ?></option>
            <?php } ?>
          </select>
                            
                </div>


<ul class="testk">
            <?php while(have_rows('career_jobs_repeater')): the_row();?>
            <li class="job_type" data-type="<?php the_sub_field('jobs_type');?>">
              <div class="jobs_title_left">
                <h3><a href="<?php the_sub_field('apply_now_button_url');?>"><?php the_sub_field('jobs_title');?></a>, <span><?php the_sub_field('jobs_location');?></span></h3>
                <span><?php the_sub_field('jobs_type');?></span>
              </div>
              <div class="jobs_apply_button">
                <a href="<?php the_sub_field('apply_now_button_url');?>"><?php the_sub_field('apply_now_button_title');?></a>
              </div>
            </li>
          <?php endwhile;?>
          </ul>

   <style type="text/css">
  #filter-careers-type option:empty {
    display: none;
}
</style>
<script type="text/javascript">
    $("#filter-careers-type").change(function() {
    var filterValue = $(this).val();
    var job_type = $('.job_type'); 
      
    job_type.hide()
    job_type.each(function(i, el) {
         if($(el).attr('data-type') == filterValue) {
             $(el).show();
         }
    })

    if ("All" == filterValue) {
    job_type.show();
  }
     
});

</script> 

    if ("All" == filterValue) {
    job_type.show();
  }
     
});

</script> 

Leave a comment