composer require putyourlightson/craft-sprig

{{ sprig('_components/search') }}

{{ sprig.script }}

{# Sets a default value if not defined by the `query` input field below #}
{% set query = query ?? '' %}

{# Replaces only the `#results` div on keyup or when the value is changed #}
<input sprig s-trigger="keyup changed" s-replace="#results"
  type="text" name="query" value="{{ query }}" placeholder="Search">

<div id="results">
  {% if query %}
    {% set entries = craft.entries.search(query).all() %}
    {% if entries|length %}
    <ul>
      {% for entry in entries %}
        <li><a href="{{ entry.url }}">{{ entry.title }}</a></li>
      {% endfor %}
    </ul>
    {% else %}
        No results
    {% endif %}
  {% endif %}
</div>

{{ sprig('_components/load-more', {'limit': 2}) }}

{{ sprig.script }}

{% set offset = offset ?? 0 %}

{% set entries = craft.entries.offset(offset).limit(limit).all() %}

{% for entry in entries %}
  <h6>{{ entry.title }}</h6>
{% endfor %}

{% if entries %}
  {# Increments `offset` by the value of `limit` and swaps itself out on click #}
  <button sprig s-val:offset="{{ offset + limit }}" 
    s-target="this" s-swap="outerHTML">
    Load another
  </button>
{% endif %}