Preview:
// PHP Action
function highlight_text($text, $keyword) {
    return preg_replace('/(' . preg_quote($keyword, '/') . ')/i', '<strong>$1</strong>', $text);
}
add_action('wp_ajax_rst_ajax_search', 'rst_ajax_search_action');
add_action('wp_ajax_nopriv_rst_ajax_search', 'rst_ajax_search_action');

function rst_ajax_search_action() {
	global $wp_query;
	$s = isset($_POST['s']) ? sanitize_text_field($_POST['s']) : '';
	if ($s) {
		$args = array(
			'post_type'      => 'product',
			'post_status'    => 'publish',
			'posts_per_page' => 10,
			's'              => $s,
		);
		$the_query = new WP_Query($args);
		$wp_query = $the_query;
		$i = 0;
		if ($the_query->have_posts()) :
			?>
			<div class="rst-search-result-product">
				<span class="result-head">PRODUCTS<span>(<?php echo esc_html($the_query->found_posts); ?>)</span></span>
				<div class="rst-list-result-product">
					<div class="rst-list-result-product-column">
					<?php
						while ($the_query->have_posts()) : $the_query->the_post();
						$product_id = get_the_ID();
						$i++;
						$product = wc_get_product($product_id);
						$sku = $product->get_sku();
						if($i == 6){
							echo '</div><div class="rst-list-result-product-column">';
						}
					?>
					<div class="rst-item-result-product">
						<div class="rst-item-result-product-thumb">
							<?php echo get_the_post_thumbnail($product_id, 'woocommerce_thumbnail'); ?>
						</div>
						<div class="rst-item-result-product-meta">
							<h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
							<?php 
								if($sku){
							?>
							<span>SKU: <?php echo esc_html($sku); ?></span>
							<?php
								}
							?>
						</div>
					</div>
					<?php
						endwhile;
					?>
					</div>
				</div>
				<?php
					if ($the_query->found_posts > 10) {
				?>
					<div class="wiew_all_product_wrap">
						<a href="<?php echo esc_url(home_url('/?s=' . $s . '&post_type=product')); ?>" class="wiew_all_product">View all products </a>
				</div>
				<?php
					}
				?>
			</div>
			<div class="rst-search-result-meta">
				<?php
					$args = array(
						'taxonomy'   => 'product_cat',
						'number' => 2,
						'orderby' => 'name',
						'name__like' => $s,
						'hide_empty' => false,
					);
					$tags = get_terms($args);
					$total = count($tags);
					//var_dump($tags);
					 if (!empty($tags) && !is_wp_error($tags)) {
						$y = 0;
				?>
				
				<div class="rst-search-result-meta-box rst-search-result-meta-box-product-cat">
					<span class="result-head">CATEGORIES<span>(<?php echo $total; ?>)</span></span>
					<ul>
					<?php
						foreach ($tags as $tag) {
							$y++;
							$tag_link = get_tag_link($tag->term_id);
							$term = get_term($tag->term_id);
							$thumbnail_id = get_term_meta( $tag->term_id, 'thumbnail_id', true );
							$thumbnail_url = wp_get_attachment_url( $thumbnail_id );
							$parent_terms = [];
							while ($term->parent != 0) {
								$term = get_term($term->parent);
								if (!is_wp_error($term) && $term) {
									$parent_terms[] = $term;
								}
							}
							$in = '';
							if (!empty($parent_terms)) {
								$in = 'in ';
								$reversed_array = array_reverse($parent_terms);
								$z = 0;
								foreach ($reversed_array as $item) {
									$z++;
									if($z == 1){
										$in = $in . esc_html($item->name);
									}else{
										$in = $in . ' > ' . esc_html($item->name);
									}
									
								}
							}
							
							$title_tag = highlight_text($tag->name,$s);
					?>
					<li><a href="<?php echo esc_url($tag_link); ?>" class="taxonomy-link-meta">
					<?php
						if ( $thumbnail_url ) {
					?>
					<img src="<?php echo esc_url( $thumbnail_url ); ?>" alt="" />
					<?php
						}
					?>
					<div>
					<h4><?php echo $title_tag; ?></h4>
					<?php
						if($in){
					?>
					<span><?php echo $in; ?></span>
					<?php
						}
					?>
					</div>
					</a></li>
					<?php
						//if($y == 2) break;
						}
					?>
					</ul>
				</div>
				<?php
					 }
				?>
				<?php
					$args = array(
						'taxonomy'   => 'post_tag',
						'number' => 1,
						'name__like' => $s,
						'hide_empty' => true,
					);
					$tags = get_terms($args);
					 if (!empty($tags) && !is_wp_error($tags)) {
				?>
				<div class="rst-search-result-meta-box">
					<span class="result-head">TAGS</span>
					<ul>
						<?php
							foreach ($tags as $tag) {
								
								$tag_link = get_tag_link($tag->term_id);
								 $title_tag = highlight_text($tag->name,$s);
						?>
						<li><a href="<?php echo esc_url($tag_link); ?>"><?php echo $title_tag; ?></a></li>
						<?php
							
							}
						?>
					</ul>
				
				</div>
				<?php
					 }
				?>
				<?php
				$args_post = array(
					'post_type'      => 'post',
					'post_status'    => 'publish',
					'posts_per_page' => 1,
					's'              => $s,
				);
				
				$the_query_post = new WP_Query($args_post);
				if ($the_query_post->have_posts()) :
					?>
				<div class="rst-search-result-meta-box">				
					<span class="result-head">POSTS</span>
					<ul>
						<?php
							while ($the_query_post->have_posts()) : $the_query_post->the_post();
								$tag_link = get_the_permalink();
								$title_tag = highlight_text(get_the_title(),$s);
						?>
						<li><a href="<?php echo esc_url($tag_link); ?>"><?php echo $title_tag; ?></a></li>
						<?php
							endwhile;
						?>
					</ul>
				</div>
				<?php
					endif; 
					wp_reset_query();
				?>
			</div>
		<?php
		else :
			echo '<p class="no-result">No results</p>';
		endif;
		wp_reset_query();
	}
	exit;
}



//Js Call
jQuery('.rst-search .rst-wcas-search-input').on("input", function(e) {
	e.preventDefault();
	var dInput = this.value;
	if (dInput.length >= 2) {
		jQuery('.rst-search-result').addClass('show');
		jQuery('.rst-wcas-proccesing').addClass('show');
		jQuery('.rst-wcas-close').removeClass('show');
		var ajax_url = jQuery('.ajax_url').val();
		jQuery.ajax({
			type: "POST",
			url: ajax_url,
			data: {
				'action' 	: 'rst_ajax_search',
				's' 		: dInput,
			}
		}).done(function(data){
			var items = jQuery(data);
			jQuery('.rst-wcas-proccesing').removeClass('show');
			jQuery('.rst-wcas-close').addClass('show');
			jQuery('.rst-search-result-inner').html(items);
		});
	}
});
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter