Question

我在views.py中有以下搜索查询：

class SearchView(View):
    def get(self, request, *args, **kwargs):
        queryset = BlogPost.objects.all()
        query = request.GET.get('q')
        if query:
            queryset = queryset.filter(
                Q(title__icontains=query) |
                Q(content__icontains=query)
            ).distinct()
        context = {
            'queryset': queryset,
            'query': query,
        }
        return render(request, 'blogs/search_result.html', context)

如果我搜索类似Tesla的单词，结果模板中显示的结果如下：

请帮助我，如何在Django模板中以黄色突出显示搜索到的查询？谢谢您的帮助！

编辑：这是带有搜索框的模板代码

<div class="card my-4">
    <div class="card-body">
        <div class="card-title">Search blog</div>
        <form action="{% url 'blog:search_blog' %}">
            {% csrf_token %}
            <input type="text" class="form-control" name="q" placeholder="What are you looking for?">
            <input type="submit" value="Search" class="btn btn-success btn-sm mt-3">
        </form>
    </div>
</div>

这是result_search的模板

{% block content %}
<div class="container bg-light w-100">
    <h2 class="display-6 border-bottom py-3">Results for "{{ query }}"</h2>
    {% for post in queryset %}
    <div class="my-1">
        <a class="link" href="{{ post.get_absolute_url }}">{{ post.title }}</a>
    </div>
    {% endfor %}
</div>
{% endblock %}

谢谢

编辑2：丹尼尔·罗斯曼，先生，这是下面的html，我以黄色突出显示了它。

Answer 1

您可以在模板过滤器中执行此操作。像这样：

@register.filter
def highlight_search(text, search):
    highlighted = text.replace(search, '<span class="highlight">{}</span>'.format(search)
    return mark_safe(highlighted)

现在您可以在模板中执行以下操作：

{% load my_tags %} # wherever you put the template filter

{% for post in queryset %}
<div class="my-1">
    <a class="link" href="{{ post.get_absolute_url }}">{{ post.title|highlight_search:query }}</a>
</div>
{% endfor %}

您需要将search_text与呈现结果页面的上下文一起发回。

Answer 2

尝试将backgroud-color的{{1}}更改为附加了搜索结果的div

.link {
    background-color: yellow;
}

Answer 3

您还可以使用 django-haystack 中的功能，但是您需要在设置中配置简单的后端：

pipenv install django-haystack

您的settings.py

INSTALLED_APPS = (
   'haystack'
)

HAYSTACK_CONNECTIONS = {
    'default': {
        'ENGINE': 'haystack.backends.simple_backend.SimpleEngine',
    },
}

创建一个新的模板过滤器：

@register.filter
def highlight_search(text, search):
    from haystack.utils.highlighting import Highlighter
    highlight = Highlighter(search, html_tag='strong', css_class='highlighted', max_length=400)

    return highlight.highlight(text)

您的模板将如下所示：

{{ result.htmldata|highlight_search:myquery|safe  }}

内置的safe将呈现您在实现中选择的html_tag。

更多信息：https://django-haystack.readthedocs.io/en/master/highlighting.html

如何在Django模板的结果页面中突出显示搜索到的查询？

3 个答案: