Search without leaving or refreshing page 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.

&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;


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;";
});
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() %}

&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 %}