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>
          {% for entry in entries %}
              <li><a href="{{ entry.url }}">{{ entry.title }}</a></li>
          {% endfor %}
    {% else %}
        <p>Your search for "{{ query }}" didn’t return any results.</p>
    {% 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;";
  • What do you mean with "show/hide elements on search"? – carlcs Dec 14 '16 at 11:51
  • 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 Dec 14 '16 at 11:52
  • 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 Dec 14 '16 at 11:53

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">

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

        <h3>Search Results</h3>

        {% if entries|length %}
                {% for entry in entries %}
                    <li>{{ entry.title }}</li>
                {% endfor %}
        {% else %}
            <p>No results.</p>
        {% endif %}
{% endif %}
  • 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 Dec 14 '16 at 12:12
  • Get rid of your JS to hide/show the results. This solution works purely server side using the Twig conditional. – carlcs Dec 14 '16 at 12:14
  • Thank you! Right hopefully can work it from here (with clearing the search query etc.). Much appreciated :-) – Starfall Projects Dec 14 '16 at 12:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.