Wordpress search bar outputting only posts titles

Question

I would like to create a Wordpress search bar in PHP, displayed in just one page of my site (I am working on a new theme I have made). As result, the search bar should output only the permalinks (titles) of my posts that are related to the search keyword.
The issue I have now is that the search output is showing lorem ipsum text and the sidebar. Whatever keywords I search, that same output is showing up. (see screenshot).

Thank you very much for your help!

searchform.php

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
  <label>
    <span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
        <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'search', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
  </label>
  <input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
</form>

search.php

<?php get_header(); ?>

  <section id="primary" class="content-area">
    <main id="main" class="site-main">

      <?php if ( have_posts() ) : ?>

        <header class="page-header">
          <h1 class="page-title"><?php
            /* translators: %s: search query. */
            printf( esc_html__( 'Search Results for: %s', 'materialpress' ), '<span>' . get_search_query() . '</span>' );
          ?></h1>
        </header><!-- .page-header -->

        <?php
        while ( have_posts() ) : the_post();
          /* Make sure the template is your content.php */
          get_template_part('content');

        endwhile;

        the_posts_navigation();

      else :
        /* Show no content found page */
        echo 'Not posts found';

      endif; ?>

      </main><!-- #main -->
    </section><!-- #primary -->

<?php get_sidebar(); get_footer();

mypage.php

<?php get_header(); ?>


<?php get_search_form(); ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <div class="container">
    <div id="content_post">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <?php the_content(); ?>
      </div>
    </div>    
  </div>

<?php endwhile; ?>
<?php endif; ?>

content-search.php

<?php get_header(); ?>

<?php if (have_posts()):  ?>

<div class="container">
  <?php while(have_posts()): the_post(); ?>
  <div class="row-posts-container">
    <div class="row-posts">
      <div class="posts col-lg-12 hidden-sm col-md-12 hidden-xs">
        <a href="<?php the_permalink(); ?>"><?php $first = str_replace(' | ', '<br />', get_the_title()); echo str_replace('REPLACE_ME', '<i>REPLACE_ME</i>', $first);?></a>
      </div>
    </div>
  </div>
  <?php endwhile; ?>
</div>

<?php endif; ?>

Answer 1

The problem is that content-search.php also contains a header and a loop. It should only contain the sections of code you want to reuse for each item in the main loop, by using something like this in content-search.php:

  <div class="row-posts-container">
    <div class="row-posts">
      <div class="posts col-lg-12 hidden-sm col-md-12 hidden-xs">
        <a href="<?php the_permalink(); ?>"><?php $first = str_replace(' | ', '<br />', get_the_title()); echo str_replace('REPLACE_ME', '<i>REPLACE_ME</i>', $first);?></a>
      </div>
    </div>

Answer 2

Do this are trying to access a wrong template file

while ( have_posts() ) : the_post();
     /* Make sure the template is your content.php */
      get_template_part('content', 'search');
endwhile;

You need to do this because the file name is content-search.php