WordPress Ajax Search withou Plugin

Ajax search is the modern way of searching content on website/blog & using a plugin for every small feature that can be achieved by a few lines of code is not a good approach.

In this tutorial, I will guide you how to create WordPress Ajax Search without Plugin.

// 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' => 5, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => 'post' ) );
    if( $the_query->have_posts() ) :
        while( $the_query->have_posts() ): $the_query->the_post(); ?>

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

        <?php endwhile;
    wp_reset_postdata();  
  else: 
    echo '<h3>No Results Found</h3>';
    endif;
    die();
}
// add the ajax fetch js
add_action( 'wp_footer', 'ajax_fetch' );
function ajax_fetch() {
?>
<script type="text/javascript">
function fetchResults(){
  var keyword = jQuery('#searchInput').val();
  if(keyword == ""){
    jQuery('#datafetch').html("");
  } else {
    jQuery.ajax({
      url: '<?php echo admin_url('admin-ajax.php'); ?>',
      type: 'post',
      data: { action: 'data_fetch', keyword: keyword  },
      success: function(data) {
        jQuery('#datafetch').html( data );
      }
    });
  }
    
}
</script>

<?php
}