<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.block{
position: relative;
width: 660px;
height: 50px;
border: 1px solid black;
margin: 100px auto;
}
.res{
width: 550px;
height: 50px;
border-style: none;
outline: none;
box-sizing: border-box;
padding-left: 20px;
font-size: 16px;
float: left;
}
.btn{
display: block;
width: 110px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #68b5ff;
color: white;
font-size: 16px;
float: left;
}
.menu{
margin: 0;
padding: 0;
width: 550px;
border: 1px solid silver;
margin-left: -1px;
}
.menu>li{
font-size: 14px;
list-style: none;
line-height: 30px;
padding-left: 10px;
cursor: pointer;
font-weight: bold;
}
.menu>li>a{
color: black;
text-decoration: none;
}
.menu>li:hover{
background-color: #e7e7e7;
}
</style>
</head>
<body>
<div class="block">
<input class="res" type="text">
<span class="btn">百度一下</span>
</div>
<script>
var result=document.getElementsByClassName("res")[0];
var block=document.getElementsByClassName("block")[0];
result.onkeyup=function(e){
var val=this.value;
//动态创建script标签
var sc=document.createElement("script");
sc.src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+val+"&cb=showData";
document.body.appendChild(sc);
sc.remove();
}
//回调函数
function showData(data){
var menu=document.getElementsByClassName("menu")[0];
if(menu){
menu.remove();
}
var ul=document.createElement("ul");
ul.className="menu";
for(var i=0;i<data.s.length;i++){
var li=document.createElement("li");
li.innerHTML="<a href='https://www.baidu.com/s?wd="+data.s[i]+"'>"+data.s[i]+"</a>";
ul.appendChild(li);
}
block.appendChild(ul);
}
</script>
</body>
</html>
JSONP跨域实现百度搜索API
最新推荐文章于 2024-08-09 17:20:48 发布