サイドバーの検索結果をsearch.phpへ表示させたい

Question

https://www.cg-method.com/side-job/wordpress-custom-search/
https://webfun-style.com/wordpress-custom-search/

上記サイトを参考にカテゴリなどから絞り込み検索の作成をしています。
こちらの方法ですと、作成したものの直下に検索結果が表示されます。
ここまでは表示や検索などは動作しています。
こちらの検索フォームをサイドバーに設置したいため、「search.php」にて、メイン画面に結果の表示をさせたいです。
単純に結果の部分を「search.php」に貼るだけではなく、クリックイベントで呼び出す必要性があると思うのですが、その方法がわかりません。

HTMLとCSSしか知識がないため理解が乏しくて申し訳ございません。
よろしくお願いいたします。

【custom-search.phpに記載している内容（一部ブランクあり）】

<?php
$args = array(
	
  'post_type' => '〇〇〇',
  'post_status' => 'publish',
  'posts_per_page' => -1,
  'orderby' => 'date',
  'order' => 'DESC'
);
if (!empty($_POST['search_craft'])) {
    foreach ($_POST['search_craft'] as $value) {
        $search_craft[] = htmlspecialchars($value, ENT_QUOTES);
    }
    $tax_query_args[] =
        array(
        'taxonomy' => 'craft',
        'terms' => $search_craft,
        'field' => 'term_id',
        'operator' => 'IN'
   );
}
if (!empty($_POST['〇〇〇'])) {
    foreach ($_POST['〇〇〇'] as $value) {
        $〇〇〇[] = htmlspecialchars($value, ENT_QUOTES);
    }
    $tax_query_args[] =
		array(
        'taxonomy' => '〇〇〇',
        'terms' => $〇〇〇,
        'field' => 'term_id',
        'operator' => 'IN'
   );
}

if(!empty($_POST['search_craft']) ||  !empty($_POST['〇〇〇'])) {
    $args += array('tax_query' => array($tax_query_args));
}
?>

<div id="search-result">
  <div class="search">
    <form method="get" action="<?php echo esc_url(home_url() . $_SERVER['REQUEST_URI']); ?>">
      <div class="checkbox">

        <div class="condition-title">カテゴリ別</div>
        <div class="condition">
          <?php
          $〇〇〇 = get_terms('〇〇〇', array('hide_empty' => false));
          foreach ($〇〇〇s as $〇〇〇) :
            $checked = "";
            if (in_array($〇〇〇->term_id, (array)$search_〇〇〇)) $checked = " checked";
          ?>
            <label>
              <input type="checkbox" name="search_f〇〇〇[]" class="check_box" id="check_<?php echo esc_attr($〇〇〇->term_id); ?>" value="<?php echo esc_attr($〇〇〇->term_id); ?>" <?php echo $checked; ?>>
              <span><?php echo esc_html($〇〇〇->name); ?></span>
            </label>
          <?php endforeach; ?>
        </div>
<input type="submit" value="検索" class="submit-button" name="s" >
<input type="hidden" name="search" value="1">
	<input type="hidden" name="s" value="<?php the_search_query(); ?>">
      </div>
      <?php wp_nonce_field('my-ajax-nonce', 'nonce'); ?>
    </form>
	  
	  
	  
<?php if(!empty($_POST['search'])) : ?>
    <?php
    $the_query = new WP_Query($args);
    if ($the_query->have_posts()) :
    ?>
      <div id="article-results" class="article-result h-card">
        <div class="item_set">
          <?php
          while ($the_query->have_posts()) :
            $the_query->the_post();
          ?>
            <div class="article">
              <a href="<?php the_permalink(); ?>">
                <?php the_post_thumbnail('medium'); ?>
                <div><?php the_title(); ?></div>
              </a>
            </div>
          <?php endwhile; wp_reset_postdata(); ?>
</div>
<?php else : ?>
<p>該当する記事はありませんでした。</p>
<?php endif; ?>
<?php endif; ?>
</div>
  </div>

  <script>
    var ajaxurl = '<?php echo esc_url(admin_url('admin-ajax.php')); ?>';
  </script>
	<script src="<?php echo esc_url(get_stylesheet_directory_uri() . '/asset/js/search.js'); ?>"></script>
</div>

【search.jsに記載している内容】

        jQuery(function($){
    function customSearch(){
        // 1. フォームのデータを生成
        var form = $('#search-result form').get()[0];
        var formData = new FormData(form);
        formData.append('action', 'custom_search');

        // 2. Ajaxを行う
        $.ajax({
          type: 'POST',
          url: ajaxurl,
          data: formData,
          processData: false,
          contentType: false,
          success: function(data){
            $('#search-result').prop('outerHTML', data);
            $('.submit-button').attr('type', 'button');
          }
        });
        return false;
    };

    // 3. クリックイベントの設定
    $('.submit-button').attr('type', 'button');
    $(document).on('click', '.submit-button', function(){
        customSearch();
    });
});

【functions.phpに記載している内容】

// Ajaxで検索結果を表示する関数
function custom_search() {
    $nonce = $_REQUEST['nonce'];
    if(wp_verify_nonce($nonce, 'my-ajax-nonce')) {
        get_template_part('custom-search');
    }
    die();
}
add_action('wp_ajax_custom_search', 'custom_search');
add_action('wp_ajax_nopriv_custom_search', 'custom_search');


// JS
add_action( 'wp_head', function () { ?>

<script>
jQuery(function($){

	const defaultPostsCount = 4;
	const addPostsCount = 4;
	let offset = 4;
	let isAllPosts = false;
	let flag = false;

	let documentHeight = jQuery(document).height();
	let windowsHeight = jQuery(window).height();

   function customSearch(){
        var form = $('#search-result form').get()[0];
				var formData = new FormData(form);

				offset = 0;
				documentHeight = jQuery(document).height();
				windowsHeight = jQuery(window).height();
				isAllPosts = false;
				flag = false;

				formData.append('action', 'custom_search');
				formData.append('offset', 0);
				formData.append('posts_per_page', defaultPostsCount);

				flag = true;
        $.ajax({
          type: 'post',
          url: ajaxurl,
          data: formData,
          processData: false,
          contentType: false,
          success: function(data){
            $('#search-result').prop('outerHTML', data);
						$('.submit-button').attr('type', 'button');

						documentHeight = jQuery(document).height();
						offset += addPostsCount;
						flag = false;
          }
        });
        return false;
    };

 $('.submit-button').attr('type', 'button');
    $(document).on('click', '.submit-button', function(){
        customSearch();
    });
});

		function addSearch() {
			let form = $('#search-result form').get()[0];
			let formData = new FormData(form);
			formData.append('action', 'add_search');
			formData.append('offset', offset);
			formData.append('posts_per_page', defaultPostsCount);

			if ( ! isAllPosts ) {
				if ( ! flag ) {
					flag = true;
					$.ajax({
						type: 'post',
			      url: ajaxurl,
						data: formData,
						processData: false,
						contentType: false,
						success: function(data) {
							let nodes = jQuery.parseHTML(data);
							let itemCount = nodes[1].children.length;
							if ( itemCount < addPostsCount ) {
								isAllPosts = true;
							}

							$('#article-results').append(data);
							documentHeight = jQuery(document).height();
							offset += addPostsCount;
							flag = false;
						}
					});
				}
			}
			return false;
		}

		jQuery(window).on("scroll", function() {
			let scrollPosition = windowsHeight + jQuery(window).scrollTop() + 80;
			if (scrollPosition >= documentHeight) {
				addSearch();
			}
		});

		$("#check_1").prop("checked", true);
		customSearch();	
});

</script>
<?php } );
add_filter('template_include','custom_search_template');
function custom_search_template($template){
   if ( is_search() ){
      $post_types = get_query_var('post_type');
      foreach ( (array) $post_types as $post_type )
      $templates[] = "search-{$post_type}.php";
      $templates[] = 'search.php';
      $template = get_query_template('search',$templates);
   }
    return $template;
}