My code is working like charm but i need to add 2 dropdown into it:
this is where i input the value:
<form>
<input type="text" name="keyword" id="keyword" onkeyup="fetch()" placeholder="Search..">
</form>
and i want it to look like this:
<form>
<input type="text" name="keyword" id="keyword" onkeyup="fetch()" placeholder="Search..">
<select>
<option>location category</option>
<option>option2</option>
</select>
<select>
<option>category</option>
<option>option2</option>
</select>
</form>
i put this code in functions.php its working fine
<script type="text/javascript">
function fetch(){
jQuery.ajax({
url: '<?php echo admin_url('admin-ajax.php'); ?>',
type: 'post',
data:{ action: 'data_fetch', keyword: jQuery('#keyword').val() },
success: function(data) {
jQuery('#datafetch').html( data );
}
});
}
</script>
<?php
}
// the ajax function
add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){
$the_query = new WP_Query(
array(
'posts_per_page' => -1,
's' => esc_attr( $_POST['keyword'] ),
'post_type' => 'locations'
)
);
if( $the_query->have_posts() ) :
while( $the_query->have_posts() ): $the_query->the_post();
$myquery = esc_attr( $_POST['keyword'] );
$a = $myquery;
$search = get_the_title();
if( stripos("/{$search}/", $a) !== false) {?>
<div class="city-results">
<a href="<?php the_permalink();?>">
<h3>
<?php the_title();?>
</h3>
</a>
</div>
<?php }
endwhile;
wp_reset_postdata();
endif;
die();
}
?>
i guess we need to edit this area where fetching data
data:{ action: 'data_fetch', keyword: jQuery('#keyword').val() },
i tried using this Method but is not working :
data:{ action: 'data_fetch', keyword: jQuery('#keyword , #keyword2').val() },
but i'm noob in Jquery/Ajax
if anyone help me here with this Thanks in advance
My Answer:
Rate this post
5 of 5 based on 2567 votesComments