您的位置：首页 > Web前端 > JQuery

Ajax (jquery)实现智能提示搜索框（in Django）

2015-10-30 12:51 651 查看

搜索框输入搜索名字，从数据库中筛选名字, 如果有包含输入的字母的名字则以json格式返回并且显示在搜索框下：

html文件：

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<body>
<div style="margin-top: 300px;margin-left: 520px;">
<form action="/Fsearch/" method="get" style="margin: auto 0;">
请输入英文名：<br/>
<input type="text" id="search-text" name="q"><button type="button" id='search-button'>搜索</button>
<p><span id='search-result'></span></p>
</form>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#search-text").keyup(function(){
var q = $("#search-text").val();                         #获取搜索框输入的值
$.get("/Fsearch/",{'q':q}, function(data){               #参数：发送的url；传入的数据；请求成功后的调用函数（data即是试图函数返回的json格式数据）详情
for (var i = data.length - 1; i >= 0; i--) {
$('#search-result').append(data[i]+'<br/>')      #加入到search-result部分显示
};
})
});
$('#search-text').keydown(function(){
$('#search-result').empty();
})
$('#search-text').blur(function(){
$('#search-result').empty();
})
});
</script>
</body>
</html>

对应的视图函数：

def Fsearch(request):
q = request.GET['q']
recontents = PreContent.objects.filter(name__contains=q)

　　#此地很重要，由于要返回json类型到模板，但是json.dumps()只能够把python内置数据类型转化为json，所以以下把上面
从数据库中取出来的queryset型数据转化为数组类型，再用json.dumps()方可成功。

6     rejson = []
7     for recontent in recontents:
8         rejson.append(recontent.name)
return HttpResponse(json.dumps(rejson), content_type='application/json')

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航