Back to SiteSearch Support

haralake
haralake

Hello!
I need to customize the look of autocomplete results on search input component but i don't know how. I found the searchinput component with all the .htm files so the code is:

{% if results.count %}
    {% for result in results | slice(0, __SELF__.autoCompleteResultCount) %}
        {# Display results #}
<div class="ss-autocomplete-result">
    <div class="ss-autocomplete-result__aside">
        <a href="{{ result.url }}">
            <img class="ss-autocomplete-result__image" src="{{ result.thumb.getThumb(120, auto) }}" alt=""/>
        </a>
    </div>
    <h4 class="ss-autocomplete-result__title">
        <a href="{{ result.url }}">{{ result.title | raw }}</a>
        {% if __SELF__.showProviderBadge %}
            <span class="ss-autocomplete-result__badge">
                {{ result.provider }}
            </span>
        {% endif %}
    </h4>
    <hr/>
</div>
    {% endfor %}

    {% if __SELF__.searchPage %}
        <p class="ss-show-all-results">
            <a href="{{ __SELF__.searchPage | page }}?q={{ query | url_encode(true) }}">
                Show all results &raquo;
            </a>
        </p>
    {% endif %}
{% else %}
    {# No results found #}
    <p>Your search for {{ query }} returned no results.</p>
{% endif %}

but how can i override it?

OFFLINE
OFFLINE

See https://octobercms.com/docs/cms/components#overriding-partials

You can copy the partials you want to override to themes/yourtheme/searchinput/ and make your changes.

1-2 of 2