原生JS模拟百度搜索关键字与跳转
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#text{
width: 300px;
height: 30px;
}
ul {
width: 302px;
border: 1px solid #ddd;
border-top:0;
display: none;
}
ul li {
list-style: none;
font-size: 12px;
font-family: "微软雅黑";
height: 20px;
line-height: 20px;
}
ul li a{
text-decoration: none;
color: #000;
display: block;
}
ul li a:hover{
background: red;
color: #fff;
}
</style>
</head>
<body>
<input type="text" id="text" />
<ul id="list"></ul>
<script type="text/javascript">
var oTxt = document.getElementById("text");
var oUl = document.getElementById("list");
oTxt.onkeyup = function(){
var val = oTxt.value;
var oScript = document.createElement('script');
oScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+val+"&cb=hhl";
document.body.appendChild( oScript );
document.body.removeChild( oScript );
}
function hhl( 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>';
}
oUl.innerHTML = str;
oUl.style.display = 'block';
}
</script>
</body>
原生JS模拟百度搜索关键字与跳转的更多相关文章
- 原生JS实现百度搜索功能
今天呢给大家分享一下自己用原生JS做的一个百度搜索功能,下面上代码: <!DOCTYPE html> <html> <head> <meta charset= ...
- JS——模拟百度搜索
注意事项: 1.for循环移除子节点时,其长度是变化的 2.在文档流中,input.img.p等标签与其他标签有3px的距离,利用左浮动,可以消除3px距离 3.背景图片定位时,第一个值是x轴方向的值 ...
- python--selenium简单模拟百度搜索点击器
python--selenium简单模拟百度搜索点击器 发布时间:2018-02-28 来源:网络 上传者:用户 关键字: selenium 模拟 简单 点击 搜索 百度 发表文章摘要:用途:简单模拟 ...
- Splinter学习--初探1,模拟百度搜索
Splinter是以Selenium, PhantomJS 和 zope.testbrowser为基础构建的web自动化测试工具,基本原理同selenium 支持的浏览器包括:Chrome, Fire ...
- JS 实现百度搜索功能
今天我们来用JS实现百度搜索功能,下面上代码: HTML部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- JavaScript-dom3 json_str dom元素控制 模拟百度搜索
访问关系-封装代码 html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- JS---DOM---案例:模拟百度搜索框
模拟百度搜索框 我的思路整理: 1. 注册文本框抬起事件(onkeyup) 2. 处理函数: --->创建临时数组,循环遍历文本框键入的文字内容和keywords数组,用keyWords[i]. ...
- js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
- asp.net mvc 模拟百度搜索
页面代码: <td><span>*</span>车牌号码:</td> <td> <div id="search"& ...
随机推荐
- android- 远程调试
最近由于要在另外一台android设备上调试代码,在本机PC上查看其log.两台机器离的比较远, 无法用usb直接连接,于是在网上找了很多资料,最找使用adb connect方法解决了该问题.解决过程 ...
- 十个你需要在 PHP 7 中避免的坑
1. 不要使用 mysql_ 类函数 终于,你不用再看到建议不要使用 mysql_ 函数的提示了.因为 PHP 7 从核心上完全移除了它们,这意味着请你移步至更好的 mysqli_ 类函数,或者更灵活 ...
- spark2.1注册内部函数spark.udf.register("xx", xxx _),运行时抛出异常:Task not serializable
函数代码: class MySparkJob{ def entry(spark:SparkSession):Unit={ def getInnerRsrp(outer_rsrp: Double, we ...
- Google Cardboard的九轴融合算法——基于李群的扩展卡尔曼滤波
Google Cardboard的九轴融合算法 --基于李群的扩展卡尔曼滤波 极品巧克力 前言 九轴融合算法是指通过融合IMU中的加速度计(三轴).陀螺仪(三轴).磁场计(三轴),来获取物体姿态的方法 ...
- SSO-单点统一登录系统的设计与实现
本文主要基于web类应用展开讨论,提供的是一种通用机制和方法,所以不论何种技术栈都可进行相应的具体实现. 实现目标 可以在相同或跨域环境下完成各应用的统一登录/注销 方案原理 本质上是采用了web应用 ...
- burp的dns记录功能
写个备忘. 先点copy复制url,然后生成的url就能用了. 一关就没了,比较鸡肋些,不适合持久的,适合马上就能见效果的那种.
- PHPCMS v9.6.0 任意文件上传漏洞分析
引用源:http://paper.seebug.org/273/ 配置了php debug的环境,并且根据这篇文章把流程走了一遍,对phpstorm的debug熟练度+1(跟pycharm一样) 用户 ...
- Linux提示字符设置
当我们登陆linux后,显示的提示字符究竟是什么意思呢?又可不可以设置呢. 首先来看看默认的显示: 普通用户: [fuwh@localhost ~]$ root用户: [root@localhost ...
- [JSOI2007]文本生成器
题目描述 JSOI交给队员ZYX一个任务,编制一个称之为“文本生成器”的电脑软件:该软件的使用者是一些低幼人群,他们现在使用的是GW文本生成器v6版. 该软件可以随机生成一些文章―――总是生成一篇长度 ...
- bzoj 1835: [ZJOI2010]基站选址
Description 有N个村庄坐落在一条直线上,第i(i>1)个村庄距离第1个村庄的距离为Di.需要在这些村庄中建立不超过K个通讯基站,在第i个村庄建立基站的费用为Ci.如果在距离第i个村庄 ...