How to implement a search function on the front end of a website and display a list of search results with highlighted keywords?

When building a content-rich website, providing an efficient and convenient search function is a key factor in improving user experience.AnQiCMS (AnQiCMS) took this into consideration from the very beginning of its design, allowing us to relatively easily implement search functionality on the website front end with its flexible template engine and built-in tags, and further optimize it to highlight keywords in search results prominently.

Core Mechanism: Understand the Search Principle of AnQiCMS

The core of the AnQiCMS website front-end search lies insearch/index.htmlThis template file. When a user submits a keyword through the search form on the website, that keyword will be passed as a namedqURL query parameter to the preset/searchpath. For example, if the user searches for "AnQi CMS", the URL might behttp://yourdomain.com/search?q=安企CMS.

Insearch/index.htmlin the template, the system has built-inarchiveListThe tag is very smart. It automatically identifies and utilizes the existing URLs in theqThe parameter is used to filter the relevant document content. This means that most of the search logic is handled internally by AnQiCMS, and we only need to focus on the front-end presentation.

Build a search form

The first step in implementing a search function is to provide an intuitive search form.This form is usually placed at the top of the website, in the sidebar, or on a dedicated search page.A basic search form will useGETThe method sends the user's input keyword to/searchthe path.

Here is a simple search form example.

<form method="get" action="/search">
    <div class="search-input-group">
        <input type="text" name="q" placeholder="请输入搜索关键词..." value="{{urlParams.q}}" class="search-field">
        <button type="submit" class="search-button">搜索</button>
    </div>
</form>

In this form:

• method="get"Ensure that the keyword is passed as a URL query parameter.
• action="/search"The path to the search results page is specified.
• name="q"The input box is crucial, AnQiCMS'archiveListThe tag will recognize thisqParameter.
• value="{{urlParams.q}}"This is a small trick that allows users to see the keywords they entered previously on the search results page, enhancing the user experience.urlParams.qIt will automatically retrieve the current URL inqThe value of the parameter.

Display the search results list

After the user submits a search request, AnQiCMS will loadsearch/index.htmlthe template. In this template, we usearchiveListtags to retrieve and display the list of documents found in the search.

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <div class="search-result-item">
        <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
        <p class="description">{{item.Description}}</p>
        <div class="meta">
            <span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
            <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            <span>浏览量：{{item.Views}}</span>
        </div>
    </div>
    {% empty %}
    <div class="no-results">
        很抱歉，没有找到与“{{urlParams.q}}”相关的结果。
    </div>
    {% endfor %}

    <div class="pagination-area">
        {% pagination pages with show="5" %}
            {# 分页导航的代码，可参考官方文档 #}
            {% if pages.FirstPage %}
                <a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">首页</a>
            {% endif %}
            {% if pages.PrevPage %}
                <a href="{{pages.PrevPage.Link}}">上一页</a>
            {% endif %}
            {% for page in pages.Pages %}
                <a class="{% if page.IsCurrent %}active{% endif %}" href="{{page.Link}}">{{page.Name}}</a>
            {% endfor %}
            {% if pages.NextPage %}
                <a href="{{pages.NextPage.Link}}">下一页</a>
            {% endif %}
            {% if pages.LastPage %}
                <a class="{% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">末页</a>
            {% endif %}
        {% endpagination %}
    </div>
{% endarchiveList %}

In the above code:

• archiveList archives with type="page" limit="10"will automatically obtain withqThe document matches the parameters and is paginated 10 items per page.
• for item in archivesLoop through each search result.
• item.Title/item.Link/item.Descriptionare commonly used document fields, used to display search result summaries.
• {% empty %}Blocks are used to display friendly prompts when there are no search results.
• {% pagination pages with show="5" %}Tags are used to create pagination links, ensuring easy navigation among a large number of search results.

Implementation of keyword highlighting

To make the keywords in the search results more prominent, we can use the filter provided by the AnQiCMS template engine to process the title and description. The core idea is to get the user's input keywords and then replace all the matched keywords in the title and description with<mark>tags.

AnQiCMS providedreplaceFilters andsafeA filter, can help us easily achieve this.

1. Get the search keywordInsearch/index.htmlIn the template, you can use{{urlParams.q}}Directly get the current URLqThe parameter value, i.e., the search keyword.
2. UsereplaceFilterReplace the matched keywords in the title or description with tags containing<mark>keywords.
3. UsesafeFilter: Due toreplaceThe filter will insert HTML tags (such as<mark>)，To make the browser correctly parse these tags instead of displaying them as plain text, we need to usesafefilter.

Modify the code that displays the search results slightly to add keyword highlighting:

"twig {% set searchQuery = urlParams.q %} {# Get search keywords #}"

{% archiveList archives with type=“page” limit=“10” %}

{% for item in archives %}
<div class="search-result-item">
    <h3>
        <a href="{{item.Link}}">
            {# 对标题进行高亮处理 #}
            {% if searchQuery %}
                {{ item.Title|replace:searchQuery,'<mark>'~searchQuery~'</mark>'|safe }}
            {% else %}
                {{ item.Title }}
            {% endif %}
        </a>
    </h3>
    <p class="description">
        {# 对描述进行高亮处理 #}
        {% if searchQuery %}
            {{ item.Description|replace:searchQuery,'<mark>'~searchQuery~'</mark>'|safe }}
        {% else %}
            {{ item.Description }}
        {% endif %}
    </p>
    <div class="meta">
        <span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
        <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
        <span>浏览量：{{item.Views}}</span>
    </div>
</div>
{% empty %}
<div class="no-results">
    很抱歉，没有找到与“{{urlParams.q}}”相关的结果。
</div>
{% endfor %}

<div class="pagination-area">
    {# 分页导航的代码同上 #}
    {% pagination pages with show="5" %}
        {% if pages.FirstPage %}<a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">首页</a>{% endif %}
        {% if pages.PrevPage %}<a href