【20】网站搭建:搜索提醒功能

一、前言   

  其实每一个input输入框都会自动保存用户的搜索记录,然后表现出来。而我的想法是可以在输入的同时自动查询数据库,然后将结果显示在页面中,所以明显查询数据库的搜索提醒对于用户来说要高效的多。将两者的效果对比一下:

二、开发步骤

1.关闭输入框的记录显示

  因为每一个input输入框都会默认将本地搜索记录进行展示,如果不将其关闭,将会影响数据库的查询输出。关闭记录显示也很简单,只需要将input框的autocomplete属性设置位off。

1
<input type="text" name="q" class="form-control" autocomplete="off" placeholder="搜点啥?" id="key">

2.返回Json格式的数据

  后面会使用Ajax请求该方法,将返回出去的Json数据,动态加载在输入框下面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@csrf_exempt
def findWords(request):   
    """   
    查询数据库的文章标题   
    :param request:   
    :return:   
    """   
    key = request.POST.get('key', '')      
    list = Post.objects.filter(Q(display=0) | Q(display__isnull=True), title__icontains=key)[:5]   
    search_list = []   
    for post in list:   
        data = {   
            'id': post.id,   
            'title': post.title   
        }   
        search_list.append(data)   
    # 错误In order to allow non-dict objects to be serialized   
    return JsonResponse(search_list, safe=False)

  此处需要注意两点,第一点:需要给方法加上@csrf_exempt装饰器,用来关闭csrf的令牌功能,否则将可能出现CSRF token missing or incorrect的错误。第二点:返回的JsonResponse中,还需要令safe参数为False,否则也可能出现In order to allow non-dict objects to be serialized的错误。

3.编写Ajax代码

  构造好返回的Json数据后,接下来就是编写Ajax部分的代码,用来请求上面的方法。在这之前还需要定义一个div,用来存放加载的标签,如:

1
2
3
4
<div class="blog-search" style="display: none;" id="blog-search">   
    <ul id="titles">   
    </ul>   
</div>

  下面是Ajax代码,最关键的是用来了keyup事件,用来检测键盘是否有弹起的行为,也就是说一旦有键盘按下,就会执行下面的post请求,目标地址是上面的方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(function(){   
        
    // 按键弹起,自动加载相关标题   
    $("#key").keyup(function(){   
        // 获取搜索关键词   
        var key = $("#key").val();   
        // alert(key);   
        if(key == ""){   
            $("#blog-search").hide();   
        }else{   
            //3. 请求数据。   
            $.post("{% url 'blog:findWords' %}",{key:key} ,function(data , status){   
                //alert(data);   
                $("#blog-search").show();   
                $("#titles").empty();   
                $(data).each(function(index , c) {   
                    if(c.title.length > 20){   
                        title = c.title.substring(0, 15);   
                        $("#titles").append("<li>" + title + "...</li>")   
                    }else{   
                        title = c.title   
                        $("#titles").append("<li>" + title + "</li>")   
                    }   
                });   
            }, "json");   
        }   
    });
});

4.动态设置存放数据的div宽度

1
2
3
// 使得输入框与提醒框宽度一致   
var inWidth = $("#key").outerWidth();   
$("#blog-search").outerWidth(inWidth);

5.点击标题自动提交数据

1
2
3
4
5
6
7
8
9
// 自动提交,查找   
// 动态绑定事件   
$("#titles").on("click","li", function(){   
    var word = $(this).text();   
    if(word.includes("...")){   
        word = word.substring(0, word.length -3);   
    }   
    $("#key").val(word);      
});

  原文出处:https://jzfblog.com/detail/140,文章的更新编辑以此链接为准。欢迎关注源站文章!

posted @   代码打碟手  阅读(273)  评论(0编辑  收藏  举报
编辑推荐:
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)
点击右上角即可分享
微信分享提示