Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-12-14T12:12:34.443Z
Answers.Text: I think this has the same problem - I'm still reloading the page on search, so the element I've hidden is staying hidden
Answers.UserDisplayName: Starfall Projects
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-12-14T12:14:55.293Z
Answers.Text: Get rid of your JS to hide/show the results. This solution works purely server side using the Twig conditional.
Answers.UserDisplayName: carlcs
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-12-14T12:20:25.007Z
Answers.Text: Thank you! Right hopefully can work it from here (with clearing the search query etc.). Much appreciated :-)
Answers.UserDisplayName: Starfall Projects
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-12-14T12:04:49.417Z
Answers.LastActivityDate: 2016-12-14T12:04:49.417Z
Answers.UserDisplayName: carlcs
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-12-14T11:51:43.893Z
Comments.Text: What do you mean with *"show/hide elements on search"*?
Comments.UserDisplayName: carlcs
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-12-14T11:52:51.880Z
Comments.Text: 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.
Comments.UserDisplayName: Starfall Projects
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-12-14T11:53:55.317Z
Comments.Text: 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
Comments.UserDisplayName: Starfall Projects
Tags: <search>
Title: Search without leaving or refreshing page
ThreadText: # 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.
  
  ```
  <div class="revealedOnSearch">
      <h2>Search Results</h2>
  
      {% set query = craft.request.getParam('q') %}
      {% set entries = craft.entries.search(query).order('score') %}
  
      {% if entries|length %}
          <p>{{ entries|length }} results:</p>
          <ul>
            {% for entry in entries %}
                <li><a href="{{ entry.url }}">{{ entry.title }}</a></li>
            {% endfor %}
          </ul>
      {% else %}
          <p>Your search for "{{ query }}" didn’t return any results.</p>
      {% endif %}
  </div>
  
  ```
  
  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() %}
  
  <form action="">
      {% set value = query.search is defined ? query.search : '' %}
      <input type="search" id="search" name="search" value="{{ value }}" autocomplete="off">
      <label for="search">Search</label>
  
      <input type="submit" value="Search">
  </form>
  
  {% if query|length and query.search %}
      {% set entries = craft.entries.search(query.search) %}
  
      <aside>
          <h3>Search Results</h3>
  
          {% if entries|length %}
              <ul>
                  {% for entry in entries %}
                      <li>{{ entry.title }}</li>
                  {% endfor %}
              </ul>
          {% else %}
              <p>No results.</p>
          {% endif %}
      </aside>
  {% 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 :-)  
  
  ---
  
  