How to implement search functionality on the website frontend 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 element in enhancing user experience.At the very beginning of the design of AnQiCMS, this point was fully considered. With its flexible template engine and built-in tags, we can relatively easily implement search functionality on the website front-end and further optimize it to make the keywords in the search results prominently highlighted.

核心机制：理解 AnQiCMS 的搜索原理

安企CMS 网站前端搜索的核心在于search/index.htmlThis template file. When a user submits a keyword through the search form on the website, this keyword will be passed as the query parameter namedqto the predefined/searchPath. For example, if the user searches for "AnQi CMS", the URL may behttp://yourdomain.com/search?q=安企CMS.

Insearch/index.htmltemplates, the system built-inarchiveList标签非常智能。它会自动识别并利用 URL 中存在的q参数来筛选相关的文档内容。这意味着，大部分的搜索逻辑都由 AnQiCMS 内部处理，我们只需关注前端的呈现。

Build a search form

The first step in implementing the 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.GETThe method sends the user input keywords to/searchThe path.

Here is an example of a simple search form:

<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 keywords are passed as URL query parameters.
• action="/search"Specify the path of the search results page.
• name="q"Is the input box key, AnQiCMS'sarchiveListThe tag will identify thisqParameter.
• value="{{urlParams.q}}"This is a small tip that allows users to see the keywords they previously entered on the search results page, enhancing the user experience.urlParams.qIt will automatically retrieve the current URL.qthe value of the parameter.

Display the search results list

When the user submits a search request, AnQiCMS will loadsearch/index.htmlthe template. In this template, we usearchiveListtags to obtain 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"it will automatically obtain withqThe document matches the parameters and is paginated by 10 per page.
• for item in archivesLoop through each search result.
• item.Title/item.Link/item.DescriptionAre commonly used fields in documents, used to display search result summaries.
• {% empty %}Block used to display friendly prompts when no search results are found.
• {% pagination pages with show="5" %}Tags used to generate pagination links, ensuring easy navigation even with a large number of search results.

Implement keyword highlighting

In order 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>Label it.

AnQiCMS providesreplacefilters andsafeFilter, which can help us easily achieve this.

1. Get the search keywords: Insearch/index.htmlIn the template, you can{{urlParams.q}}Directly get the current URL.qParameter value, i.e., the search keyword.
2. UsereplaceFilter: Replace the matched keywords in the title or description with keywords containing<mark>tags.
3. UsesafeFilterDue toreplaceThe filter will insert HTML tags (such as<mark>），To make the browser parse these tags correctly instead of displaying them as plain text, we need to usesafeFilter.

Display the modified search results code, adding keyword highlighting:

English translation: `twig {% set searchQuery = urlParams.q %} {# 获取搜索关键词 #}

{% 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