Can I only see the search results after searching?

I created the website so that the search results would appear on the same url page.
All I want to see is only “search results” after searching.
But now, the search results and the original items all appear together.

Can I only see the search results after searching?
For example, I want to hide the existing code by putting css in the search result.

site/templates/collection.php

<?php foreach ($results->sortBy('num', 'desc') as $result): ?>
    <figcaption>
                <span><?= $result->title() ?></span>
                <span><?= $result->artist()->kt() ?></span>
                <span><?= $result->size() ?></span>
                <span><?= $result->paper() ?></span>
                <span><?= $result->color() ?></span>
                <span><?= $result->edition() ?></span>
                <span><?= $result->date() ?></span>
    </figcaption>
<?php endforeach ?>
<?php foreach ($page->children()->listed()->sortBy('num', 'desc') as $album): ?>
    <figcaption>
            <span><?= $album->title() ?></span>
            <span><?= $album->artist()->kt() ?></span>
            <span><?= $album->size() ?></span>
            <span><?= $album->paper() ?></span>
            <span><?= $album->color() ?></span>
            <span><?= $album->edition() ?></span>
            <span><?= $album->date() ?></span>
    </figcaption>
<?php endforeach ?>

<div class="search-box">
        <form action="<?= page('collection')->url() ?>" autocomplete="off" class="searchbox" method="get">
          <div class="form-group">
            <input class="search" id="search" name="q" onfocus="this.value=''" placeholder="Search..." type="search" value="<?= html($query) ?>">
          </div>
        </form>
</div>

site/controllers/collection.php

<?php

return function ($site) {
  $query   = get('q');
  $results = $site->find('collection')->search($query, 'title|artist|size|paper|color|edition|date|number');
  $results = $results->paginate(20);
  return [
    'query'   => $query,
    'results' => $results,
    'pagination' => $results->pagination()

  ];
};

Imo, it doesn’t make sense to duplicate the code like that. Define your $results once in the controller:

<?php

return function ($site) {
$results = $page->children()->listed()->sortBy('num', 'desc');
if ($query = get('q') ) {
  $results = $results->search($query, 'title|artist|size|paper|color|edition|date|number');
};
  $results = $results->paginate(20);
  return [
    'query'      => $query,
    'results'    => $results,
    'pagination' => $results->pagination()

  ];
};

Then in your template, only use this one loop:

<?php foreach ($results as $album): ?>
    <figcaption>
            <span><?= $album->title() ?></span>
            <span><?= $album->artist()->kt() ?></span>
            <span><?= $album->size() ?></span>
            <span><?= $album->paper() ?></span>
            <span><?= $album->color() ?></span>
            <span><?= $album->edition() ?></span>
            <span><?= $album->date() ?></span>
    </figcaption>
<?php endforeach ?>

Thank you, I got it.
However, if I didn’t search for anything the first time, I should see all the original content. What should I do in that case? (That’s why I wrote down the original content together before.)

There’s one thing wrong in the controller, should be $page instead of $site now:

return function ($page) {

Apart from that, the complete collection should be shown if no search parameter is set, or at least the first 20 items (since you paginate).

An error appears when replacing $site with $page on the controller.
There is no problem with the search function before, but I just want all the original contents to be shown before I search.

Looks like you didn’t use the suggested code.

Oh, I’m sorry! The problem was solved with your help. Thank you so much.