<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. win10下安装Ubuntu16.04双系统

    其实我是不喜欢系统的,之前都是在win下面进行开发,现在来了个项目,经过各种环境的安装调研,最终选择在Ubuntu下面进行开发.之前想着为啥不在虚拟机里面安装Ubuntu进行操作呢,由于虚拟机的体验不 ...

  2. requests.post发送字典套字典

    import requests import json a = { "data": { "project": { "url": " ...

  3. Hadoop MR编程

    Hadoop开发job需要定一个Map/Reduce/Job(启动MR job,并传入参数信息),以下代码示例实现的功能: 1)将一个用逗号分割的文件,替换为“|”分割的文件: 2)对小文件合并,将文 ...

  4. SpringMVC(五)：@RequestMapping下使用@RequestParam绑定请求参数值

    在处理方法入参使用@RequestParam可以把请求参数传递给请求方法,@RequestParam包含的属性值: --- value :参数名称 --- required :是否必须,默认为true ...

  5. 个人网站建设（适合Java初学者）（一）

    概述 作为一个在八本学校在校生,没有实验室,也没有项目可做.一直想做一个个人博客,一年前学完javaweb之后做了一个简单的博客,ui惨不忍睹就算了,还有各种bug.酝酿了很久,寒假用了将近一个月时间 ...

  6. __init__特殊方法

    __init__特殊方法不应当返回除了none以外的任何方法.

  7. js分页效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 玩转Ecs服务器之搭建Ftp

    以前一直没用过linux,直到阿里搞活动,所以买了台服务器玩玩,熟悉一下linux命令,哈哈. 阿里的官方文档介绍的还是比较详细的,但是你可能还是会遇到一些问题,在这里呢,不推荐配置本地用户的方式,因 ...

  9. C# 关键字替换

    /// <summary> /// 关键字替换 /// </summary> /// <param name="body"></param ...

  10. [LeetCode] Brick Wall 砖头墙壁

    There is a brick wall in front of you. The wall is rectangular and has several rows of bricks. The b ...