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

<div id="search_result_form">

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

<div class="row">

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





Step => 2 jQuery and Ajax code in JavaScript file.
jQuery('.pop-search').keyup(function(e) {
        var text = jQuery('.pop-search').val();
        jQuery('#search_text_result').html('Results for "'+text+'"');
                type: "POST",
                url: admin_url,
                data: { 
                    action: 'data_search_ajax',
                    text: text,
                cache: false,
                success: function(data){                    

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_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" >';
                        $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>


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

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