Home > Article > Web Front-end > How to implement Baidu search interface in JS
This article mainly introduces the example code of JS to implement Baidu search interface and link function. Friends who need it can refer to it
This article introduces JS to implement Baidu search interface and link function through code. The specific code is as follows Shown:
In the last article, I introduced you to JS to implement Baidu search function
<!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">
<p id="wei">
<input type="text" id="text">
<ul id="list"></ul>
</p>
<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>The above is what I compiled for you. I hope it will be helpful to you in the future.
Related articles:
What are the usages of async&await in Koa2?
In the zTree tree plug-in, how to implement click-loading in five-level regions across the country
How to implement node express personalized chat rooms?
The above is the detailed content of How to implement Baidu search interface in JS. For more information, please follow other related articles on the PHP Chinese website!