Django如何实现搜索词高亮显示

题目

Django如何实现搜索词高亮显示

示意图

实现步骤

核心思想：利用jieba分词，然后传回分词数组，注意转化成字符串返回，然后在js中使用split分成数组

test.html

<!--
 * @Description: 测试搜索词高光
 * @Autor: 365JHWZGo
 * @Date: 2022-02-15 17:01:24
 * @LastEditors: 365JHWZGo
 * @LastEditTime: 2022-03-19 23:27:10
-->
{% extends "test_base.html" %} {% block content %}
<style>
    .box {
        margin-top: 100px;
        margin-left: 600px;
    }
    
    .content {
        color: rgb(165, 162, 162);
        margin-bottom: 20px;
    }
</style>

<div class="box">
    <input type="text" id="searchQ" placeholder="搜索🔍">
    <button onclick="searchQuestion()"><a href="" id="searchA">点击搜索</a></button>
    <div class="content">
        搜索内容如下
    </div>
    {% for item in discussions %} {%if returnflag %}
    <div class="question" id="itemdata{{item.id}}">
        {{ item.title }}
    </div>
    <script>
        // 将string转化为数组
        returnflag = '{{returnflag}}'.split(',');
        // console.log('returnflag', returnflag);
        // 如果returnflag有数据
        if (returnflag) {
            var itemdata = document.getElementById('itemdata{{item.id}}').innerText;
            // console.log('itemdata', itemdata);
            flag = false;
            for (var i = 0; i < returnflag.length; i++) {
                // console.log('returnflag[i]', returnflag[i]);
                // itemdata字符串中是否包含分词
                if (itemdata.indexOf(returnflag[i]) >= 0) {
                    itemdata = itemdata.replace(String(returnflag[i]), '<span style="color:red">' + returnflag[i] + '</span>');
                    // console.log('itemdata', itemdata);
                    flag = true;
                }
            }
            if (!flag) {
                alert('没有搜索到有关内容!');
            } else {
                document.getElementById('itemdata{{item.id}}').innerHTML = itemdata;
            }
        }
    </script>
    {%else%}
    <div class="question">
        {{ item.title }}
    </div>
    {%endif%} {% endfor %}
</div>

<script src="https://cdn.bootcss.com/jquery/2.1.2/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
    function searchQuestion() {
        // 获取搜索框的id
        searchQ = document.getElementById('searchQ');
        // 获取搜索框里的文字
        text = searchQ.value;
        // 如果搜索框输入有文字
        if (text) {
            // 获取a标签
            searchA = document.getElementById('searchA');
            // 重新赋值href
            searchA.href = "/test?searchQ=" + text;
        } else {
            alert('请输入要搜素的内容!');
        }

    }
</script>
{% endblock content %}

views.py

# test.html
def test_view(request):
    searchQ = request.GET.get('searchQ',None)
    if searchQ:
        discussions = []
        stop_words = word_cut(searchQ)
        ds = Discussion.objects.all()
        for d in ds:
            for word in stop_words:
                if word in d.title:
                    discussions.append(d)
        discussions = list(set(discussions))
        # 如果有搜索结果
        if discussions:
            returnflag = ','.join(stop_words)
        else:
            returnflag = None
    else:
        discussions = Discussion.objects.all()
        returnflag = None
    return render(request,"test.html",{'discussions':discussions,'returnflag':returnflag})

urls.py

path('test/',views.test_view),