其实每一个input输入框都会自动保存用户的搜索记录，然后表现出来。而我的想法是可以在输入的同时自动查询数据库，然后将结果显示在页面中，所以明显查询数据库的搜索提醒对于用户来说要高效的多。将两者的效果对比一下：
因为每一个input输入框都会默认将本地搜索记录进行展示，如果不将其关闭，将会影响数据库的查询输出。关闭记录显示也很简单，只需要将input框的autocomplete属性设置位off。
<input type="text" name="q" class="form-control" autocomplete="off" placeholder="搜点啥?" id="key">
后面会使用Ajax请求该方法，将返回出去的Json数据，动态加载在输入框下面。
@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的错误。
构造好返回的Json数据后，接下来就是编写Ajax部分的代码，用来请求上面的方法。在这之前还需要定义一个div，用来存放加载的标签，如：
<div class="blog-search" style="display: none;" id="blog-search">
<ul id="titles">
</ul>
</div>
下面是Ajax代码，最关键的是用来了keyup事件，用来检测键盘是否有弹起的行为，也就是说一旦有键盘按下，就会执行下面的post请求，目标地址是上面的方法。
$(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");
}
});
});
// 使得输入框与提醒框宽度一致
var inWidth = $("#key").outerWidth();
$("#blog-search").outerWidth(inWidth);
// 自动提交，查找
// 动态绑定事件
$("#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，文章的更新编辑以此链接为准。欢迎关注源站文章！
原文：https://www.cnblogs.com/djcoder/p/10885509.html