测试效果:

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. MySql数据库与JDBC编程三

    多表连接查询(两种规范 SQL92和SQL99) SQL92规范: 等值连接,非等值连接,外连接,广义笛卡儿积连接 多个表都放在from后,,连接条件放在where后,条件要求两列值相等,则为等值连接 ...

  2. C# Winform软件多语言(汉语、英语。。。)界面的切换,低耦合

    Winform软件多语言切换,个人见解,降低软件对语言展示的耦合度. 1.设计图(自己瞎画的呵呵) 2.做的小demo,界面如下 3.下面是代码展示部分 1)Form1代码展示 namespace W ...

  3. spring框架笔记

    Spring实现依赖注入的两种方式: 1.构造方法注入 2.set方法注入,p标签注入 Spring中事务的两种实现方式: 编程式事务管理 声明式事务管理(推荐) Spring增强类型: Before ...

  4. 读EntityFramework.DynamicFilters源码_心得_单元测试03

    上个星期我们只是显示了一个示例,怎么在EF的框架内,注入我们拓展的动态过滤器 第一步:安装EntityFramework.DynamicFilters 第二步:重写OnModelCreating方法 ...

  5. k8s常用指令集(kubectl kubeadm)

    1      Kubectl指令集 1.1      Master查询节点信息 [root@master1 kubernetes-1.10]# kubectl get nodes 1.2      查 ...

  6. Algorithm——最长公共前缀

    一.问题 编写一个函数来查找字符串数组中的最长公共前缀. 如果不存在公共前缀,返回空字符串 "". 示例 1: 输入: ["flower","flow ...

  7. float、display和流

    一.css的元素有很深的道理和它存在的意义 块元素:默认元素的上下左右会有间隔(即使设置margin.padding为0也一样).如果想0间隔,考虑float. float:会使元素自动生成一个块级框 ...

  8. 廖雪峰JavaScript练习题2

    请把用户输入的不规范的英文名字,变为首字母大写,其他小写的规范名字.输入:['adam', 'LISA', 'barT'],输出:['Adam', 'Lisa', 'Bart'] 肯定有更简单的方法, ...

  9. TortoiseSvn 取消忽略的文件

    右键,TortoiseSvn->Properties,选择列表的一条(Property svn:Ignore),remove.

  10. C语言--清理getchar缓存

    getchar()采用了缓冲区,而getch()才是立即获取,所以要想再用getchar()获取正确的值必须先清空缓冲区,如果是windows操作系统,用fflush(stdin)函数或rewind( ...