<p>Here is some example code that should probably help you get things set up. The relevant part is the line <code>{% if query|length and query.search %}</code>, where you’d test if there’s a query string at all and additionally if the search param is set (you can leave out that part if you want).</p>

<pre><code>{% set query = craft.request.getQuery() %}

&lt;form action=""&gt;
    {% set value = query.search is defined ? query.search : '' %}
    &lt;input type="search" id="search" name="search" value="{{ value }}" autocomplete="off"&gt;
    &lt;label for="search"&gt;Search&lt;/label&gt;

    &lt;input type="submit" value="Search"&gt;
&lt;/form&gt;

{% if query|length and query.search %}
    {% set entries = craft.entries.search(query.search) %}

    &lt;aside&gt;
        &lt;h3&gt;Search Results&lt;/h3&gt;

        {% if entries|length %}
            &lt;ul&gt;
                {% for entry in entries %}
                    &lt;li&gt;{{ entry.title }}&lt;/li&gt;
                {% endfor %}
            &lt;/ul&gt;
        {% else %}
            &lt;p&gt;No results.&lt;/p&gt;
        {% endif %}
    &lt;/aside&gt;
{% endif %}
</code></pre>

CC BY-SA 3.0
2016-12-14T12:12:34.443Z
I think this has the same problem - I'm still reloading the page on search, so the element I've hidden is staying hidden
Starfall Projects
CC BY-SA 3.0
2016-12-14T12:14:55.293Z
Get rid of your JS to hide/show the results. This solution works purely server side using the Twig conditional.
carlcs
CC BY-SA 3.0
2016-12-14T12:20:25.007Z
Thank you! Right hopefully can work it from here (with clearing the search query etc.). Much appreciated :-)
Starfall Projects
CC BY-SA 3.0
2016-12-14T12:04:49.417Z
2016-12-14T12:04:49.417Z
carlcs
<p>I'm trying to do a simple search of all posts, and using this: <a href="https://craftcms.com/docs/templating/search-form" rel="nofollow noreferrer">https://craftcms.com/docs/templating/search-form</a></p>

<p>It works but in that example it assumes you display search results on another page. I am trying to build this as a single-pager (it's a really basic site). I've tried reloading the page (i.e. setting url to the current page) and this works . . . however I also want to show/hide elements on search, and this is getting lost with the page reload.</p>

<p>I have a feeling this is going to be something basic, but am stumped . . . have been playing around with it, trying includes and stuff, and getting nowhere. My apologies if it's a noob question.</p>

<pre><code>&lt;div class="revealedOnSearch"&gt;
    &lt;h2&gt;Search Results&lt;/h2&gt;

    {% set query = craft.request.getParam('q') %}
    {% set entries = craft.entries.search(query).order('score') %}

    {% if entries|length %}
        &lt;p&gt;{{ entries|length }} results:&lt;/p&gt;
        &lt;ul&gt;
          {% for entry in entries %}
              &lt;li&gt;&lt;a href="{{ entry.url }}"&gt;{{ entry.title }}&lt;/a&gt;&lt;/li&gt;
          {% endfor %}
        &lt;/ul&gt;
    {% else %}
        &lt;p&gt;Your search for "{{ query }}" didn’t return any results.&lt;/p&gt;
    {% endif %}
&lt;/div&gt;
</code></pre>

<p>So that is the code. I only want the search results appearing when the user searches (obvs) but want them on the main page (i.e the same page as the search form)</p>

<p>Here is the show/hide code if it helps at all:</p>

<pre><code>var searchForm = document.getElementById("searchForm");
var revealedOnSearch = document.getElementById("revealedOnSearch");

searchForm.addEventListener("submit", function(){
    revealedOnSearch.style = "display:block;";
});
</code></pre>

CC BY-SA 3.0
2016-12-14T11:51:43.893Z
What do you mean with *"show/hide elements on search"*?
carlcs
CC BY-SA 3.0
2016-12-14T11:52:51.880Z
The title 'search results' and the search results count - I don't want them visible on the page when it first loads, only when the user has searched. At the moment it's quite nice, as when the page first loads it just lists all the posts, which is what i want it to do.
Starfall Projects
CC BY-SA 3.0
2016-12-14T11:53:55.317Z
Although tbh this may be being too lazy . . . possibly I just only want to run and show the entire search result stuff on search? I tried playing with include to do this but couldn't figure it out
Starfall Projects
<search>
Search without leaving or refreshing page
# Search without leaving or refreshing page

(Asked by: username_0 on 2016-12-14)

I'm trying to do a simple search of all posts, and using this: https://craftcms.com/docs/templating/search-form
It works but in that example it assumes you display search results on another page. I am trying to build this as a single-pager (it's a really basic site). I've tried reloading the page (i.e. setting url to the current page) and this works . . . however I also want to show/hide elements on search, and this is getting lost with the page reload.
I have a feeling this is going to be something basic, but am stumped . . . have been playing around with it, trying includes and stuff, and getting nowhere. My apologies if it's a noob question.

    Search Results

    {% set query = craft.request.getParam('q') %}
    {% set entries = craft.entries.search(query).order('score') %}

    {% if entries|length %}
        {{ entries|length }} results:
        
          {% for entry in entries %}
              {{ entry.title }}
          {% endfor %}
        
    {% else %}
        Your search for "{{ query }}" didn’t return any results.
    {% endif %}


So that is the code. I only want the search results appearing when the user searches (obvs) but want them on the main page (i.e the same page as the search form)
Here is the show/hide code if it helps at all:
var searchForm = document.getElementById("searchForm");
var revealedOnSearch = document.getElementById("revealedOnSearch");

searchForm.addEventListener("submit", function(){
    revealedOnSearch.style = "display:block;";
});

**Tags:** search

> **Comments:**
> **username_1**: What do you mean with *"show/hide elements on search"*?  
> **username_0**: The title 'search results' and the search results count - I don't want them visible on the page when it first loads, only when the user has searched. At the moment it's quite nice, as when the page first loads it just lists all the posts, which is what i want it to do.  
> **username_0**: Although tbh this may be being too lazy . . . possibly I just only want to run and show the entire search result stuff on search? I tried playing with include to do this but couldn't figure it out  

---

## 1 answers

### Answer by username_1 on 2016-12-14. Score: 2

Here is some example code that should probably help you get things set up. The relevant part is the line {% if query|length and query.search %}, where you’d test if there’s a query string at all and additionally if the search param is set (you can leave out that part if you want).
{% set query = craft.request.getQuery() %}


    {% set value = query.search is defined ? query.search : '' %}
    
    Search

    


{% if query|length and query.search %}
    {% set entries = craft.entries.search(query.search) %}

    
        Search Results

        {% if entries|length %}
            
                {% for entry in entries %}
                    {{ entry.title }}
                {% endfor %}
            
        {% else %}
            No results.
        {% endif %}
    
{% endif %}

> **Comments:**
> **username_0**: I think this has the same problem - I'm still reloading the page on search, so the element I've hidden is staying hidden  
> **username_1**: Get rid of your JS to hide/show the results. This solution works purely server side using the Twig conditional.  
> **username_0**: Thank you! Right hopefully can work it from here (with clearing the search query etc.). Much appreciated :-)  

---

