JS实现百度搜索接口及链接功能实例代码
程序员文章站
2022-08-09 12:21:26
本文通过代码给大家介绍js实现百度搜索接口及链接功能，具体代码如下所示：
在上篇文章给大家介绍了js 实现百度搜索功能
本文通过代码给大家介绍js实现百度搜索接口及链接功能，具体代码如下所示：
在上篇文章给大家介绍了js 实现百度搜索功能
<!doctype html>
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<title>anchor</title>
<style>
*{
margin:0;
padding:0;
}
#wei{
width:500px;
height:600px;
margin:0 auto;
border:0px solid gray;
}
#wei input{
width:476px;
height:50px;
line-height: 50px;
padding-left:20px;
font-size: 16px;
}
#wei ul{
height:auto;
border:1px solid #ccc;
display: none;
}
#wei ul li{
width:100%;
height:30px;
line-height: 30px;
text-indent:10px;
font-size: 16px;
list-style: none;
}
#wei ul li a{
text-decoration:none;
}
#wei ul li:hover{
display:block;
background:#ccc;
color:#fff;
}
</style>
</head>
<body ng-controller="show">
<div id="wei">
<input type="text" id="text">
<ul id="list"></ul>
</div>
<script type="text/javascript">
var txt = document.getelementbyid("text");
var oul = document.getelementbyid("list");
txt.onkeyup = function(){
var val = txt.value;
var oscript = document.createelement("script");//动态创建script标签
oscript.src = "https://sp0.baidu.com/5a1fazu8aa54nxgko9wtanf6hhy/su?wd="+val+"&cb=callback";
//添加链接及回调函数
document.body.appendchild(oscript);//添加script标签
document.body.removechild(oscript);//删除script标签
}
//回调函数
function callback(data){
var str="";
for(var i=0;i<data.s.length;i++){
str += "<li><a href=\"https://www.baidu.com/s?wd="+data.s[i]+"\">"+data.s[i]+"</a></li>";
}
//console.log(str);
oul.innerhtml=str;
oul.style.display="block";
}
</script>
</body>
</html>
总结
以上所述是小编给大家介绍的js实现百度搜索接口及链接功能实例代码，希望对大家有所帮助