<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-密码加密

    介绍两种密码加密的方法: 这两种很常见可以再百度随意找到. 1.摩斯密码:说道密码加密不得不提的方法.很是经典. 首先说一下他的对照表,直接上图. 核心思想就是替换明文密码,将字符对应的替换成-与.两 ...

  2. Beaglebone Black&ndash; 智能家居控制系统 LAS - 刷 WiFi 模块 ESP8266 Firmware 和 ESP8266 直接收发 GPIO 信号

    用 Windows 来刷 ESP8266 固件有很多中文教程,来试试直接用 BBB 刷吧.目标是 NodeMCU,ESP-01 可用,就是我买的那个. 接线方式在上一篇.当 echo ‘BB-UART ...

  3. 24种设计模式--原型模式【Prototype Pattern】

    今天我们来讲原型模式,这个模式的简单程度是仅次于单例模式和迭代器模式,非常简单,但是要使用好这个模式还有很多注意事项.我们通过一个例子来解释一下什么是原型模式. 现在电子账单越来越流行了,比如你的信用 ...

  4. 细说php(三) 运算符与表达式

    一.算术运算符    +   -  *  /  %  ++  -- <?php $a = 100; $a++; // $a=$a+1; 先用变量再自增1 ++$a; // $a=$a+1; 先用 ...

  5. 重写系统中的UINavigationController返回按钮的事件

    1.扩展UIviewController UIViewController+BackButtonHandler.h #import <UIKit/UIKit.h> @protocol Ba ...

  6. Tomcat知识1

  7. 搭建一个web服务下载HDFS的文件

    需求描述 为了能方便快速的获取HDFS中的文件,简单的搭建一个web服务提供下载很方便快速,而且在web服务器端不留临时文件,只做stream中转,效率相当高! 使用的框架是SpringMVC+HDF ...

  8. Python基础训练题-简单数学公式

    1.在100内,将遇到被7除余数为0的都显示PASS: n=1 while n < 101: if n % 7 == 0: pass print('pass') else: print(n) n ...

  9. Ettercap之ARP+DNS欺骗

    1.网络攻击拓扑环境 网关:192.168.133.2 攻击者:192.168.133.128 受害者:192.168.133.137 2.原理讲解 ARP欺骗 简介:ARP(Address Reso ...

  10. Fragment Transactions &amp; Activity State Loss

    转自:http://www.androiddesignpatterns.com/2013/08/fragment-transaction-commit-state-loss.html The foll ...