JS实现百度搜索接口及链接功能实例代码
更新时间：2018年02月02日 15:46:20 作者：Web攻城狮
这篇文章主要介绍了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实现百度搜索接口及链接功能实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
JavaScript窗口功能指南之在窗口中书写内容...2006-07-07
JavaScript是一门非常流行的编程语言，许多开发者都会把JavaScript选为入门语言，本文向大家分享JavaScript提高执行效率的小技巧、最佳实践等非常实用的内容2017-03-03
这篇文章主要为大家详细介绍了JS实现消灭星星小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
一定要设置xmlHttp.setRequestHeader，否则传往PHP的参数会变成null（line 38）2010-11-11
这篇文章主要介绍了微信小程序整个页面的自动适应布局的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了uni-file-picker文件选择上传,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
最近在小程序的开发过程中,需要用到双向绑定,遇到报错才知道微信本身是不支持对象双向绑定的,鏖战一番找到解决方案,下面这篇文章主要给大家介绍了关于微信小程序中数据双向绑定如何实现的相关资料,需要的朋友可以参考下2023-05-05
这篇文章主要为大家详细介绍了一个网易表单以及及时验证功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要给大家介绍了关于JavaScript中split()方法的相关资料,split()方法在js处理字符串是很常见,也是很重要的一种方法必须熟练掌握,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
模板淘宝首页的分类列表效果，17173的游戏分类效果也不错。2009-04-04
最新评论