<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度搜索建议</title>
<script src="./js/lib/jquery-2.2.4/jquery-2.2.4.min.js"></script>
<style>
*{margin:0;padding:0;}
#box{
width:800px;
height: 300px;
margin: 300px auto;
}
#keyword{
width:800px;
height: 50px;
border:solid 1px #000000;
border-radius: 4px;
font-size: 20px;
}
ul{
list-style: none;
}
ul li{
color:#888;
font-size: 18px;
}
</style>
</head>
<body>
<div id="box">
<input type="text" name="keyword" id="keyword" placeholder="请输入要查询的信息">
<ul id="advice">
<!--<li>搜索建议</li>-->
<!--<li>搜索建议</li>-->
<!--<li>搜索建议</li>-->
<!--<li>搜索建议</li>-->
</ul>
</div>
<script>
$(function () {
//添加按键抬起事件
$("#keyword").keyup(function(){
//获取框中的数据
var $_messg = $("#keyword").val();
//发送Ajax请求
$.ajax({
type:"get",
dataType:"jsonp",
data:{
"wd":$_messg
},
success:function(data){
//每次输入前都清空
$("#advice").empty();
//获取到的所有数据
console.log(data.g);
for(var i = 0;i<data.g.length;i++){
//创建li标签
var $li = $("<li>");
$li.text(data.g[i].q);
$("#advice").append($li)
}
},
error:function () {
console.log('失败了');
}
})
})
})
</script>
</body>
</html>
百度搜索建议实现
来源：要发发知识网