Maison > Article > interface Web > Interface de recherche JS Baidu et code d'implémentation de la fonction de lien
Interface de recherche JS Baidu et code d'implémentation de la fonction de lien
- 小云云original
- 2018-02-05 10:07:281994parcourir
Cet article présente principalement l'implémentation JS de l'interface de recherche Baidu et l'exemple de code de la fonction de lien. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.
Dans le dernier article, je vous ai présenté JS pour implémenter la fonction de recherche Baidu
<!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>Recommandations associées :
Analyse des exemples de code Promise dans ES6
Utilisation de Promise dans JS pour implémenter un exemple de code de feux de circulation (démo)
Utilisation spécifique de promesse dans jQuery
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!