---------------------------------------------------------------View
#coding=utf-8
import jsonfrom django.core import serializers
from django.http import HttpResponse
from django.shortcuts import render, render_to_response
# Create your views here.
from django.views.decorators.csrf import csrf_exempt
from baidu.models import baidusearch
@csrf_exempt
def index(request):
return render(request,"aa.html")
@csrf_exempt
def find(request):
func=request.GET.get('keywords')
userinfo = baidusearch.objects.all()
result = list()
for i in userinfo:
result.append(i.title) ;
data={"s":result}
temp = '%s(%s)' % (func, result)
print(data)
return HttpResponse(json.dumps(data),content_type="application/json")
---------------------------------------------------------------html
{% load staticfiles %}
<!DOCTYPE html>
<meta charset="utf8">
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
#word{
position: absolute;
z-index: 99;
width: 145px;
height: auto;
background-color: white;
border: black solid 1px;
display: none;
}
.click_work{
padding-bottom: 8px;
font-weight:lighter;
font-size: 13px;
cursor:pointer;/*鼠标放上变成小手*/
}
.click_work:hover{
color: orange;
background-color: gray;
}
.error{
color: gray;
cursor:pointer;/*鼠标放上变成小手*/
}
</style>
<body>
<center>
<h1>百度</h1>
</center>
<table align="center" cellspacing="0" cellpadding="10" border="0" >
<tr>
<td style="position: relative;">
<input id="text" type="text" placeholder="搜索">
<input type="button" value="Go">
<div id="word"></div>
</td>
</tr>
</table>
<!-- 引入DOM -->
<script type="text/javascript" src="{% static 'js/jquery-3.0.0.js' %}"></script>
<!-- END DOM -->
</body>
<script>
$(function(){
//当键盘键被松开时发送Ajax获取数据
$('#text').keyup(function(){
var keywords = $(this).val();
if (keywords=='') { $('#word').hide(); return };
$.ajax({
url: 'http://suggestion.baidu.com/su?wd=' + keywords,
dataType: 'jsonp',
jsonp: 'cb', //回调函数的参数名(键值)key
// jsonpCallback: 'fun', //回调函数名(值) value
beforeSend:function(){
$('#word').append('<div>正在加载。。。</div>');
},
success:function(data){
$('#word').empty().show();
if (data.s=='')
{
$('#word').append('<div class="error">Not find "' + keywords + '"</div>');
}
$.each(data.s, function(){
$('#word').append('<div class="click_work">'+ this +'</div>');
})
},
error:function(){
$('#word').empty().show();
$('#word').append('<div class="click_work">Fail "' + keywords + '"</div>');
}
})
})
//点击搜索数据复制给搜索框
$(document).on('click','.click_work',function(){
var word = $(this).text();
$('#text').val(word);
$('#word').hide();
// $('#texe').trigger('click');触发搜索事件
})
})
</script>
</html>