<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. tk mybatis通用mapper，复杂and or条件查询

    需求:where查询,需要支持(a or b or c) and d 也就是a.b.c三个条件是或的关系,然后再与d相与. 尝试后,可以通过以下方式处理: 方式1:Weekend语法 Weekend& ...

  2. python Mysql (二)

    Mysql (二) 一. 事务 a.数据库开启事务命令 1 2 3 4 #start transaction 开启事务 #Rollback 回滚事务,即撤销指定的sql语句(只能回退insert de ...

  3. python/MySQL（索引、执行计划、BDA、分页）

    ---恢复内容开始--- python/MySQL(索引.执行计划.BDA.分页) MySQL索引: 所谓索引的就是具有(约束和加速查找的一种方式)   创建索引的缺点是对数据进行(修改.更新.删除) ...

  4. 使用poi导出数据到excel

    一.首先是导入poi所需要的jar包,我是用的是maven,添加jar包依赖 <dependency> <groupId>org.apache.poi</groupId& ...

  5. 涨薪必备Javascript，快点放进小口袋！

    摘要: 嗨,新一年的招聘季,你找到更好的工作了吗?小姐姐最近刚换的工作,来总结下面试必备小技能,从this来看看javascript,让我们更深入的了解它. 前言 在JavaScript中,被吐槽最多 ...

  6. [Other] Nuget 构建服务器与常用命令

    公司出于某些原因需要自己在内部网络搭建一个私有的 Nuget 服务器,而且要运行在 Linux服务器上面.如果说 Windows 下搭建的话很简单,直接在项目当中引入 Nuget 的库就 OK,这儿的 ...

  7. [LeetCode] Longest Word in Dictionary through Deleting 删除后得到的字典中的最长单词

    Given a string and a string dictionary, find the longest string in the dictionary that can be formed ...

  8. MYSQL存储过程中事务和DECLARE EXIT/CONTINUE HANDLER的使用

    -- 1.DECLARE EXIT HANDLER FOR SQLEXCEPTION 语句后面可以跟一个 begin end的复合语句块,也可以直接跟一个简单语句例如 :DECLARE EXIT HA ...

  9. [BZOJ 3329]Xorequ

    Description 题库链接 给出 \(n\) ,分别求 \(\leq n\) 和 \(\leq 2^n\) 的满足方程 \[x\oplus 3x=2x\] 的正整数解个数. \(1\leq n\ ...

  10. [Codeforces 864E]Fire

    Description Polycarp is in really serious trouble — his house is on fire! It's time to save the most ...