WP Custom Search

search.php

<?php
/**
 * Template Name: Search1
 */

get_header(); ?>
 <form id="searchform" action="" method="get">

					  <input class="" type="text" name="serchprm" id="searchinput" placeholder="Search">

					  <label>

						<input type="submit" name="Search">

					  </label>

				  </form>
<?php 
if($_GET['Search']){
$keyword = $_GET['serchprm'];
}
?>
<style type="text/css">
	.section-title p {
    font-size: 18px;
    float: left;
}
.image-title h4{
	float: left;
    display: inline-block;
    clear: both;
}
.mb20 {
    margin-bottom:20px;
    }
</style>
<div style="margin-top: 90px"></div>
	<section id="main-container" class="main-container">

		<div class="container">



			<?php 
			if($keyword){
                    if (get_query_var('paged')) {
                    $paged = get_query_var('paged');
                    } elseif (get_query_var('page')) { 
                        $paged = get_query_var('page');
                    } else {
                        $paged = 1;
                    } 

			$args = array(
						'post_type' => 'product',	//add your post type name here				
						'numberposts' => -1,
						'posts_per_page' => 5,
						'post_status'     => 'publish',
						'post_parent' => null,
						'order' => 'DESC',
						's' =>$keyword,
						'paged' => $paged,
						);
		
            $custom_query = new WP_Query( $args );
            //var_dump($the_query);exit();
            if( $custom_query->have_posts()):
            while ( $custom_query->have_posts() ) :
                $custom_query->the_post();
                    $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
                    	$image = empty($url) ? 'https://wp.goigi.me/graykon/wp-content/uploads/2017/12/noimage.png':$url;
                ?>	<div class="row mb20">
        <div class="section-title text-center">
              		<div class="col-md-2 col-sm-2 col-xs-12 image-main-section">
						<a href="<?php the_permalink();?>">
						<div class="img-part">
							<div class="img-section">
								<img src="<?php echo $image;?>" style="height: 80px; width: 80px;">
							</div>
						</div>
						</a>
					</div>
					<div class="col-md-10 col-sm-10 col-xs-12 image-main-section">
						<div class="img-part">
						<a href="<?php the_permalink();?>">
							<div class="image-title">
								<h4><?php the_title();?></h4>
							</div>	
							</a>
							<p><?php echo substr(get_the_excerpt(), 0, 100); ?>[...]</p>		
						</div>
					
					</div>

			        </div>
			    </div>
			    
			    
            <?php endwhile; 
             if ($custom_query->max_num_pages > 1) :
			          $orig_query = $wp_query;
			          $wp_query = $custom_query;
			           
			          ?>  
	                	 <?php
			              if (function_exists('wp_bootstrap_pagination')){
			                  wp_bootstrap_pagination();
			              }
			              ?>
		      			<?php $wp_query = $orig_query; ?>
			      		<?php endif; ?>

	         		<?php  wp_reset_postdata();
    else: echo '<h4 style="text-align:center;"> No results match! </h4> ';
    endif;
    
    }/*end of main most outer if*/
		else{
		echo '<h4 style="text-align:center;"> No results match! </h4> ';
		
		
		}  ?>

  </div>
</section>

<script>
/*jquery autofiller*/
<?php 
$args = array(
						'post_type' => 'product',					
						'numberposts' => -1,
						'post_status'     => 'publish',
						'post_parent' => null,
						'order' => 'DESC',
						
						);
		
        $allposts = get_posts( $args );
        
        $arr = [];
foreach($allposts as $allpost){
    $arr[] = json_encode($allpost->post_title);
    $keyword = implode(',',$arr);
}
            ?>
  $( function() {
    var availableTags = [<?php echo $keyword ?>];
    $( "#searchinput" ).autocomplete({
      source: availableTags,
/*minLength:2 */
    });
    $( "#searchinput1" ).autocomplete({
      source: availableTags,
/*minLength:2 */
    });
  });
  </script>
<?php get_footer(); ?>

For my patlu vai.. :)