<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模拟百度搜索关键字与跳转的更多相关文章

  1. 原生JS实现百度搜索功能

    今天呢给大家分享一下自己用原生JS做的一个百度搜索功能,下面上代码: <!DOCTYPE html> <html> <head> <meta charset= ...

  2. JS——模拟百度搜索

    注意事项: 1.for循环移除子节点时,其长度是变化的 2.在文档流中,input.img.p等标签与其他标签有3px的距离,利用左浮动,可以消除3px距离 3.背景图片定位时,第一个值是x轴方向的值 ...

  3. python--selenium简单模拟百度搜索点击器

    python--selenium简单模拟百度搜索点击器 发布时间:2018-02-28 来源:网络 上传者:用户 关键字: selenium 模拟 简单 点击 搜索 百度 发表文章摘要:用途:简单模拟 ...

  4. Splinter学习－－初探1，模拟百度搜索

    Splinter是以Selenium, PhantomJS 和 zope.testbrowser为基础构建的web自动化测试工具,基本原理同selenium 支持的浏览器包括:Chrome, Fire ...

  5. JS 实现百度搜索功能

    今天我们来用JS实现百度搜索功能,下面上代码: HTML部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  6. JavaScript-dom3 json_str dom元素控制 模拟百度搜索

    访问关系-封装代码 html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  7. JS---DOM---案例：模拟百度搜索框

    模拟百度搜索框 我的思路整理: 1. 注册文本框抬起事件(onkeyup) 2. 处理函数: --->创建临时数组,循环遍历文本框键入的文字内容和keywords数组,用keyWords[i]. ...

  8. js模拟form表单提交数据, js模拟a标签点击跳转，避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  9. asp.net mvc 模拟百度搜索

    页面代码: <td><span>*</span>车牌号码:</td> <td> <div id="search"& ...

随机推荐

  1. java 中文乱码问题，请注意response.getWriter的顺序

    反例: 正例:

  2. logback中appender继承

    实例: <?xml version="1.0" encoding="UTF-8"?> <configuration debug="t ...

  3. Struts(十七)：通过CURD来学习paramsPrepareParams拦截器栈

    背景: 通过上一章节<Struts(十六):通过CURD来学习Struts流程及ModelDriven的用法>学习了ModelDriven拦截器的用法,上章节中讲到了edit功能. 要修改 ...

  4. win10的mysql服务无法启动

    net start mysql 无法启动 1.可以进入MySQL的bin目录下 mysql --remove 2.检查一下自己的my.ini是否配置正确 [mysqld] #basedir代表自己My ...

  5. libevent中evmap实现（哈希表）

    libevent中,需要将大量的监听事件event进行归类存放,比如一个文件描述符fd可能对应多个监听事件,对大量的事件event采用监听的所采用的数据结构是event_io_map,其实现通过哈希表 ...

  6. JS继承的一些见解

    JS继承的一些见解 js在es6之前的继承是五花八门的.而且要在项目中灵活运用面向对象写法也是有点别扭,更多的时候还是觉得面向过程的写法更为简单,效率也高.久而久之对js的继承每隔一段时间就会理解出现 ...

  7. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

  8. 将 Net 项目升级 Core项目经验：（二）修复迁移后Net Standard项目中的错误

    修复迁移后Net Standard项目中的错误 接上一章,项目编译结果如下: 解决依赖dll引用 在Net Framework项目的引用如下: 各引用和作用: log4net(1.10.0.0) 用于 ...

  9. boot.img格式文件拆解实例结构解析

    以msm8226为例,讲解android源码编译生成boot.img的结构.boot.img包括boot.img header.kernel以及ramdisk文件系统.下面是对boot.img的结构进 ...

  10. [BZOJ 4919]大根堆

    Description 题库链接 给定一棵 \(n\) 个节点的有根树,每个点有一个权值 \(val_i\) .你需要选择尽可能多的节点,使得:对于任意两个点 \(i,j\) ,如果 \(i\) 在树 ...