Active Search

Overview

In this use-case, we'll display a search result featuring 20 different articles. As users enter search terms, the results will dynamically update to match. This search functionality is basic, focusing solely on article titles. For a more comprehensive search, consider using Universal Search.

Client Content

Below is the Lava template for the front-end client.

<div class="well p-3">
    <input class="form-control"  
        name="q" placeholder="Search..."
        hx-post="^/helix-gallery/articles-activesearch" 
        hx-trigger="input changed delay:500ms, search" 
        hx-target="#articles">
    <small class="text-muted">Recommended Searches: Church, AI, Digital</small>
</div>

<div id="articles">
</div>

Endpoint Template

Here is the Lava template for the endpoint.

{% assign searchTerm = 'Global' | PageParameter:'q'%}

<small>Searching: {{ Form.q}}</small>

{% contentchannelitem where:'Title *= "{{ Form.q }}" && ContentChannelId == {{ ConfigurationRigging.ArticleContentChannelId }}' sort:'StartDateTime desc' limit:'20' securityenabled:'false'%}

    {% for item in contentchannelitemItems%}
    
        {% assign returnCount = contentchannelitemItems | Size%}
        {% if returnCount == 0%}
            <div class="well">No articles matched your search.</div>
        {% endif%}
    
        <div class="article card mb-3 d-flex flex-row" {{ nextPageCall}}>
            <img class="card-image width-third" src="{{ item | Attribute:'Image','RawValue'}}">
            <div class="card-content align-self-center ml-3">
                <h4>{{ item.Title}}</h4>
                <p><small class="text-muted">{{ item | Attribute:'Author'}}</small></p> 
                <p>{{ item | Attribute:'Summary'}}</p>
            </div>
        </div>
    
    {% endfor%}

{% endcontentchannelitem%}

Demo

Here's the working demo of this feature, currently paging five items at a time. For most use cases, you may want to load more items simultaneously.

Recommended Searches: Church, AI, Digital