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执行流程细节解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
最近做到iframe的高度自适应这个问题;发现自己做的网页是通过file方式访问的，将网页代码放到apache下通过http协议访问，在iframe加载的时候调用如下js方法:果然网页高度能够自适应（对于其他方案应该也有效果，我没有注意去尝试）感兴趣的朋友可以了解下2013-01-01
一个JavaScript实例，使用循环和分割来替换和删除元素，很简单，但很实用，建议初学者学习下2014-10-10
基于JS实现页面视频video标签禁止下载(下载按钮+右击菜单)
最近做项目遇到这样的需求,禁止用户浏览页面的时候下载页面的视频,网上看到下载视频的方法有两种,本文对每种方法做详细分析,对js禁止下载视频相关知识感兴趣的朋友一起看看吧2024-02-02
下面小编就为大家带来一篇基于匀速运动的实例讲解(侧边栏,淡入淡出)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了详解webpack es6 to es5支持配置 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
javascript手机验证、邮箱验证、密码验证的正则表达式简单封装实例
正则表达式在日常的数据验证中是必不可少的验证方式,这篇文章主要给大家介绍了关于javascript手机验证、邮箱验证、密码验证的正则表达式简单封装的相关资料,需要的朋友可以参考下2022-09-09
这篇文章主要为大家详细介绍了前端实现CSV文件解析的相关方法,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以了解一下2024-03-03
这篇文章主要介绍了JavaScript实现的拼图算法,结合实例形式分析了javascript图形拼接与判定算法相关操作技巧及注意事项,需要的朋友可以参考下2019-02-02
这篇文章主要介绍了JavaScript实现的浮动层框架用法,以实例形式分析了JavaScript实现可关闭的半透明浮动层相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
最新评论