WordPress Ajax search

Live search in WP post using Ajax. to change textbox values as change data.

 

Step => 1 Html Form as like as you need.



<div class="search-column">


<form method="post" action="javascript:void(0);" name="search-form">
<input type="search" placeholder="<?php _e('Search','medium') ?>" autofocus class="pop-search">
</form>





<div id="search_result_form">


<div id="search_text_result"></div>




<div class="row">


<div class="" id="search_result">

</div>


</div>


</div>


</div>



Step => 2 jQuery and Ajax code in JavaScript file.
jQuery('.pop-search').keyup(function(e) {
        jQuery('#search_result_form').css('display','block');
        var text = jQuery('.pop-search').val();
        jQuery('#search_text_result').html('Results for "'+text+'"');
        jQuery.ajax({
                type: "POST",
                url: admin_url,
                dataType:"json",
                data: { 
                    action: 'data_search_ajax',
                    text: text,
                },
                cache: false,
                success: function(data){                    
                    if(data['data_result']==''){
                        jQuery('#search_result').hide();                        
                    }
                    else{
                        jQuery('#search_result').css('display','block');
                        jQuery('#search_result').html(data['data_result']);                            
                    }
                }
        });
    });

Step => 3 Call Ajax using jQuery in WordPress function.
/* Custom search */
function data_search_ajax(){	
	$testdomin_keyword = $_POST['text'];
	$testdomin_args_search = array(
		's'	=>	$testdomin_keyword,
		'post_status' => 'publish',
		'post_type'	=>	'post',
		'post_per_page'	=>	8
	);
	$testdomin_query = new WP_Query($testdomin_args_search);
	$testdomin_result='';	
	if($testdomin_query->have_posts()){		
		while($testdomin_query->have_posts()){
			$testdomin_query->the_post();			
                        $testdomin_featured_image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'medium-blog-small',0 );
			$testdomin_result .= '
<div class="col-md-3 search-box" >';
                        if(!empty($testdomin_featured_image))
                        $testdomin_result .= '<a href="'.get_permalink(get_the_ID()).'"><img class="img-responsive" src="'.esc_url($testdomin_featured_image[0]).'" alt="'.esc_attr(get_the_title()).'"></a>';
			$testdomin_result .= '
<div class="image-sub"><a href="'.get_permalink(get_the_ID()).'">'.get_the_title().'</a></div>


<div class="post-arthur"><a class="privacy" href="'.get_author_posts_url( get_the_author_meta( 'ID' ) ).'">'.get_the_author().'</a></div>

			  </div>

';
		}
	}
	else
		$testdomin_result = _e('Not found','textdomin');
		
	echo json_encode(array("data_result"=>$testdomin_result));
	die;
}
add_action('wp_ajax_nopriv_data_search_ajax', 'data_search_ajax');
add_action('wp_ajax_data_search_ajax', 'data_search_ajax');
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s