【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,文章的更新编辑以此链接为准。欢迎关注源站文章!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 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)