iamkonstantin/search/templates/search/search.html

{% extends "base.html" %}
{% load static wagtailcore_tags %}

{% block body_class %}template-searchresults{% endblock %}

{% block title %}Search{% endblock %}

{% block content %}
    <section class="h-full px-0 md:px-4 lg:px-8">
        <div class="px-0 md:px-4 lg:px-8">
            <h1>Search</h1>

            <form action="{% url 'search' %}" method="get" class="container">
                <div class="flex flex-col space-y-4">
                    <label for="query" class="sr-only block text-sm font-medium leading-6">Search</label>
                    <div class="mt-2 flex space-x-4">
                        <input type="text" placeholder="Type search keywords..."
                               class="block w-full rounded-xl border-0 py-1.5 px-2 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-klavender sm:text-sm sm:leading-6"
                               id="query" name="query"{% if search_query %} value="{{ search_query }}"{% endif %}>

                        <input type="submit" class="primary-button" value="Search">
                    </div>
                </div>


            </form>

        </div>
    </section>

    <section class="h-full px-0 md:px-4 lg:px-8 search">
        <div class="px-0 md:px-4 lg:px-8">
            <h2 class="sr-only">Search results</h2>

            {% if search_results %}

                {# Add this paragraph to display the details of results found: #}
                <p>You searched{% if search_query %} for “{{ search_query }}”{% endif %}
                    , {{ search_results.paginator.count }}
                    result{{ search_results.paginator.count|pluralize }} found.</p>

                {# Replace the <ul> HTML element with the <ol> html element: #}
                <ol>
                    {% for result in search_results %}
                        <li>
                            <h4><a href="{% pageurl result %}">{{ result }}</a></h4>
                            {% if result.search_description %}
                                {{ result.search_description }}
                            {% elif result.post.intro %}
                                {{ result.post.intro }}
                            {% endif %}
                        </li>
                    {% endfor %}
                </ol>

                {# Improve pagination by adding: #}
                {% if search_results.paginator.num_pages > 1 %}
                    <p>Page {{ search_results.number }} of {{ search_results.paginator.num_pages }},
                        showing {{ search_results|length }} result{{ search_results|pluralize }} out
                        of {{ search_results.paginator.count }}</p>
                {% endif %}

                {% if search_results.has_previous %}
                    <a href="{% url 'search' %}?query={{ search_query|urlencode }}&amp;page={{ search_results.previous_page_number }}">Previous</a>
                {% endif %}

                {% if search_results.has_next %}
                    <a href="{% url 'search' %}?query={{ search_query|urlencode }}&amp;page={{ search_results.next_page_number }}">Next</a>
                {% endif %}

            {% elif search_query %}
                No results found
            {% endif %}
        </div>
    </section>

{% endblock %}