测试效果:

css样式:

ul{
display:none;
}

html代码:

<input type="text" id="text" />
<ul id="list"></ul>

js代码:

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';
}

实现效果如图所示:

js 模拟百度关键字搜索与跳转的更多相关文章

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

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

  2. JS模拟百度分享侧边栏效果

    模拟百度分享侧边栏的弹出与滑入效果.当鼠标移入#div1分享侧边栏,#div1分享侧边栏区块匀速滑出直至其全部露出.当鼠标移除#div1分享侧边栏,#div1分享侧边栏区块匀速滑入隐藏,直至恢复初始位 ...

  3. 前端 ---- js 模拟百度导航栏滚动案例

    模拟百度导航栏滚动监听 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  4. 原生JS模拟百度搜索关键字与跳转

    <style type="text/css"> *{ margin: 0; padding: 0; } #text{ width: 300px; height: 30p ...

  5. JS——模拟百度搜索

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

  6. Vue.js模拟百度下拉框

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

  7. js 生成树以及关键字搜索生成树

    function main(keywords,data){ function fn(arr){ var flag = false; for(var i = 0;i <arr.length;i++ ...

  8. CSS实现模拟百度分享侧边栏效果

    在<JS模拟百度分享侧边栏效果>一文中对于Div区块的运动通过JS实现了鼠标移入滑出显示,鼠标移出滑入隐藏的效果.其实在CSS3中通过transition属性就可以较为轻松实现. < ...

  9. 百度移动搜索自动转码太坑爹,JS跳转地址会被抓取

    这段时间碰到个很崩溃的问题,一个页面通过 script 加载请求服务端进行统计再输出js进行跳转,分为两个步骤分别统计, 打开页面通过script 请求远程服务器进行统计并输出要通过js使页面跳转的最 ...

随机推荐

  1. IntelliJ IDEA 快捷键(一)(window版)

    一.高效定位代码 1.跳转 1.项目之间的跳转 Next Project Window 快捷键 Ctrl + Alt + 左方括号. Previous Project Window 快捷键 Ctrl ...

  2. 移动前端开发之viewport,devicePixelRatio的深入理解

    移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...

  3. js上传并且预览图片

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

  4. JavaScript对HTML字符转义与反转义(转码和解码)

    HTML的Encode(转码)和解码(Decode)在平时的开发中也是经常要处理的,在这里总结了使用javascript处理HTML的Encode(转码)和解码(Decode)的常用方式 一.用浏览器 ...

  5. JavaScript练习笔记整理·4 - 6.26

    基础练习(1): 我的解答为: function getMiddle(s) { if(s.length%2 == 0) { return s.charAt(s.length/2-1)+s.charAt ...

  6. 【One Day菜鸟到大鸟】MyBatis搭建环境

    一.概述     MyBatis是一个持久化框架和Hiberante差不多.比起JDBC来说MyBatis封装了JDBC让我们能够面向对象开发.比起Hiberante来说卸下了Hiberante那种重 ...

  7. 安装、配置Jupyter Notebook快速入门教程

    What? Why? How? ---安装 ---启动 ---关闭 ---保存 Markdown语法 Magic关键词 转换notebook--toHTML 创建幻灯片 运行代码 What? 文字化编 ...

  8. MFC string char cstring 类型转换

    在Unicode环境下用以下转换: CString z_strCurtTime = _T(""); // 获取当前时间 CTime z_tCurTime = CTime::GetC ...

  9. linux crontab 的使用

    linux crontab 的使用 准备(实验楼需要,实际环境不需要):sudo service rsyslog startsudo cron -f & crontab 使用添加任务:cron ...

  10. SSIS ->> Environment Variables

    SQL Server Integration Services(SSIS) 在2012版本引入了Environment Variables这个新特性.它允许我们为一个环境创建出一套变量用于为项目内的包 ...