测试效果:

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. 三年从前端小工到架构-知乎 Live 学习整理

    最近在知乎上学习了vczero (王利华,簋谣)的知乎Live「三年从前端小工到架构」,感觉受益匪浅,现将本次Live学习笔记记录如下. 本次 Live 主要包括以下内容   • 0-3 年的前端工程 ...

  2. java.lang.UnsupportedClassVersionError: action/Login : Unsupported major.minor version 52.0 (unable to load class action.Login)异常

    用myeclipse新建一个web项目,用了struts2框架,tomcat启动的时候报了这个错误. 我的问题原因是tomcat7的运行环境不知道为什么设置成了myeclipse1.7的jre,我给它 ...

  3. 小白学习css记录

    一.复习 什么是CSS? 层叠样式表 -层叠样式只会被覆盖而不会被替代 CSS的使用方式 style属性---> <h1 style="css属性"></h ...

  4. JavaScript练习笔记整理·1 - 6.23

    练习平台Codewars地址:https://www.codewars.com/ 欢迎和大家一起来讨论~╭( ・ㅂ・)و ̑̑   基础练习(1):   我的解答为: class SmallestIn ...

  5. 关于使用ajax上传图片问题

    今天需要做一个上传图片的功能,由于框架里面没有带,上网搜了下.看到有spring mvc的图片上传,而且有例子,刚好是自己需要的,直接粘贴复制下.参考: http://blog.csdn.net/lu ...

  6. git 回滚到上个版本命令以及忽略某些文件提交

    1.git回滚到上个版本 git reset --hard FETCH_HEAD 2.git忽略某些文件的提交 以前是用默认的.gitignore 然后再里面默认某些文件不提交.但是有个问题,.git ...

  7. linux 用户和组操作

    linux用户操作 查看登陆用户:whoami (结果最简洁) 或者who mom likes 或者who am i查看所有用户:cat /etc/passwd 添加:sudo adduser lil ...

  8. React - React Developer Tools开发者工具的安装与使用(Chrome调试插件)

    原文地址:http://www.cnplugins.com/zhuanti/how-to-use-react-tools.html 虽然我们曾经在React开发者工具的基础介绍里面有概括性的介绍过Re ...

  9. [问题记录]cocos2dx编译打包apk过程&问题记录

    目录: 1. 入门 2. 编译 3. 问题 4. 总结 5. 参考 ------------------------------------------------------------------ ...

  10. docker commit 显示“invalid reference format”

    docker commit的时候一直显示invalid reference format,改了几次也不行,后来发现是因为docker镜像的名字中不能包含大写字母,改成小写后就行了