TransWikia.com

Using Sprig's live search but show all entries first

Craft CMS Asked by darylknight on December 21, 2020

I want to display all results in the games section to start with, then once you search, it shows the filtered results. Sprig’s starting point I think assumes that you’re showing nothing, like a normal search box.

With the code below, it shows all results to start with – but once there’s a search query, it shows the filtered results, then also ALL of the results underneath those. What do I need to change to show all results first and REPLACE them with the filtered results after searching?

It’s something to do with the s-target stuff I think. The original loop gets ‘moved’ into #results when you search, but as I don’t understand how Sprig works so I don’t really know why it’s doing it

{% set queryParams = {} %}
{% set relatedParams = ['and'] %}

{# This is where the query logic is -combining category filters and text search etc #}

{% if sprig.include %}
    <select sprig s-target="#results" name="verdict" id="verdict">
        {# loop through options #}
    </select>
    <select sprig s-target="#results" name="rating" id="rating">
        {# loop through options #}
    </select>
    <select sprig s-target="#results" name="platform" id="platform">
        {# loop through options #}
    </select>
    <input sprig s-trigger="keyup changed" s-target="#results" type="search" name="title" id="title" />
    <div id="results"></div>
{% endif %}

{% if queryParams %}
    {% set entries = craft.entries(queryParams).orderBy('score').all() %}
    {% for entry in entries %}
        {{ entry.title }}
    {% endfor %}
{% else %}
    {% set entries = craft.entries.section('games').orderBy('title').all() %}
    {% for entry in entries %}
        {{ entry.title }}
    {% endfor %}
{% endif %}

One Answer

Looking at the example from the Sprig Cookbook, it looks like the results container should live outside the sprig.isInclude:

{% if sprig.isInclude %}
    <select sprig s-target="#results" name="verdict" id="verdict">
        {# loop through options #}
    </select>
    <select sprig s-target="#results" name="rating" id="rating">
        {# loop through options #}
    </select>
    <select sprig s-target="#results" name="platform" id="platform">
        {# loop through options #}
    </select>
    <input sprig s-trigger="keyup changed" s-target="#results" type="search" name="title" id="title" />
{% endif %}

<div id="results">
{% if queryParams %}
    {% set entries = craft.entries(queryParams).orderBy('score').all() %}
    {% for entry in entries %}
        {{ entry.title }}
    {% endfor %}
{% else %}
    {% set entries = craft.entries.section('games').orderBy('title').all() %}
    {% for entry in entries %}
        {{ entry.title }}
    {% endfor %}
{% endif %}
</div>

Correct answer by raptureaid on December 21, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP