How to create a Live Search Page

STEP 1: Get a basic WP search page working
Inside your theme's search.php page, add the following code ("template name" indicates the name to be used when choosing a template, see STEP 2):

<?php
/*
Template Name: Search Page
*/
?>
<?php get_header(); ?>

<?php
global $query_string;

$query_args = explode("&", $query_string);
$search_query = array();

if( strlen($query_string) > 0 ) {
    foreach($query_args as $key => $string) {
        $query_split = explode("=", $string);
        $search_query[$query_split[0]] = urldecode($query_split[1]);
    } // foreach
} //if

//here, you can add to the current query params
$search_query['posts_per_page'] = 1;
$search_query['post_type'] = 'post';
$search_query['taxonomy'] = 'blog';

$search = new WP_Query($search_query);

?>

<?php get_search_form(); ?>

               <?php if ($search->have_posts()) : ?>

                    <h2>Search Result For: <?php the_search_query(); ?></h2>
                    <div class="light-separator small center"></div>

                    <?php
                    while ($search->have_posts()) : $search->the_post();?>

<h2><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title();?></a></h2>

                    <?php
            endwhile;
                    else :
                        echo '
                        <div class="no-content"> 
                            <h3>Ooopss, looks like nothing matches your result.</h3>
                        </div>';
                    endif;
                ?>

<?php get_footer();

// Omit closing PHP tag to avoid "Headers already sent" issues.

STEP 2: Associate the theme with a search page
In WP backend, create a Page named "Search"
In the edit screen, choose the template named "Search Page"
Hit "Save/Publish"

STEP 3: Prepare search.php for Live Search
Please note: we added the "datafetch" wrapper and replaced the with <input type="text" name="keyword" id="keyword" onkeyup="fetch()"></input>

<?php
/*
Template Name: Search Page
*/
?>
<?php get_header(); ?>

<?php
global $query_string;

$query_args = explode("&", $query_string);
$search_query = array();

if( strlen($query_string) > 0 ) {
    foreach($query_args as $key => $string) {
        $query_split = explode("=", $string);
        $search_query[$query_split[0]] = urldecode($query_split[1]);
    } // foreach
} //if

//here, you can add to the current query params
$search_query['posts_per_page'] = 1;
$search_query['post_type'] = 'post';
$search_query['taxonomy'] = 'blog';

$search = new WP_Query($search_query);

?>

<input type="text" name="keyword" id="keyword" onkeyup="fetch()"></input>
<div id="datafetch">
               <?php if ($search->have_posts()) : ?>

                    <h2>Search Result For: <?php the_search_query(); ?></h2>
                    <div class="light-separator small center"></div>

                    <?php
                    while ($search->have_posts()) : $search->the_post();?>

<h2><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title();?></a></h2>

                    <?php
            endwhile;
                    else :
                        echo '
                        <div class="no-content"> 
                            <h3>Ooopss, looks like nothing matches your result.</h3>
                        </div>';
                    endif;
                ?>
</div>
<?php get_footer();

// Omit closing PHP tag to avoid "Headers already sent" issues.

STEP 4: Add the Ajax functions into your theme's functions.php

// add the ajax fetch js
add_action( 'wp_footer', 'ajax_fetch' );
function ajax_fetch() {
?>
<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' => 'post' ) );
    if( $the_query->have_posts() ) :
        while( $the_query->have_posts() ): $the_query->the_post(); ?>

            <h2><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title();?></a></h2>

        <?php endwhile;
        wp_reset_postdata();  
    endif;

    die();
}

That's it!