js 模拟百度关键字搜索与跳转
测试效果:
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 模拟百度关键字搜索与跳转的更多相关文章
- js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
- JS模拟百度分享侧边栏效果
模拟百度分享侧边栏的弹出与滑入效果.当鼠标移入#div1分享侧边栏,#div1分享侧边栏区块匀速滑出直至其全部露出.当鼠标移除#div1分享侧边栏,#div1分享侧边栏区块匀速滑入隐藏,直至恢复初始位 ...
- 前端 ---- js 模拟百度导航栏滚动案例
模拟百度导航栏滚动监听 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 原生JS模拟百度搜索关键字与跳转
<style type="text/css"> *{ margin: 0; padding: 0; } #text{ width: 300px; height: 30p ...
- JS——模拟百度搜索
注意事项: 1.for循环移除子节点时,其长度是变化的 2.在文档流中,input.img.p等标签与其他标签有3px的距离,利用左浮动,可以消除3px距离 3.背景图片定位时,第一个值是x轴方向的值 ...
- Vue.js模拟百度下拉框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js 生成树以及关键字搜索生成树
function main(keywords,data){ function fn(arr){ var flag = false; for(var i = 0;i <arr.length;i++ ...
- CSS实现模拟百度分享侧边栏效果
在<JS模拟百度分享侧边栏效果>一文中对于Div区块的运动通过JS实现了鼠标移入滑出显示,鼠标移出滑入隐藏的效果.其实在CSS3中通过transition属性就可以较为轻松实现. < ...
- 百度移动搜索自动转码太坑爹,JS跳转地址会被抓取
这段时间碰到个很崩溃的问题,一个页面通过 script 加载请求服务端进行统计再输出js进行跳转,分为两个步骤分别统计, 打开页面通过script 请求远程服务器进行统计并输出要通过js使页面跳转的最 ...
随机推荐
- C++命名空间使用代码
namesp.h #pragma once #include <string> namespace pers { using namespace std; struct Person { ...
- Git - 远程库的创建与认证
前些日子因为某些原因,需要在windows上创建一个remote仓库. 由于实在是太麻烦而且时间紧急,就直接用了gitstack. 发现这个东西居然需要付费,未认证时只能创建两个用户. 其实对我而言足 ...
- Oracle PL/SQL Developer 上传下载Excel
接到需求,Oracle数据库对Excel数据进行上传和下载,百度后没有很全的方案,整理搜到的资料,以备不时之需. 一.下载Oracle数据到Excel中. 下载数据到Excel在MSSql中很简单,直 ...
- 超时重试(一)ajax
我们使用jquery的ajax,超时重试可以采用两种方式,一种是配置ajax的timeout的参数,另一种就是以setTimeout定时器的方式实现: 1)timeout参数配置方式 var xhr ...
- sql: T-SQL 统计计算(父子關係,樹形,分級分類的統計)
---sql: T-SQL 统计计算(父子關係,樹形,分級分類的統計) ---2014-08-26 塗聚文(Geovin Du) CREATE PROCEDURE proc_Select_BookKi ...
- Navicat工具、pymysql模块
一 IDE工具介绍(Navicat) 生产环境还是推荐使用mysql命令行,但为了方便我们测试,可以使用IDE工具,我们使用Navicat工具,这个工具本质上就是一个socket客户端,可视化的连接m ...
- Hadoop序列化程序报错
这个错误指向序列化类,注意实现的Read和Wirte顺序一定要一致,并且要使用基本类型,不要使用包装类. java.lang.Exception: java.io.EOFException at or ...
- html中块级元素和行内元素
块级元素和行内元素的三个区别 1.行内元素与块级元素直观上的区别: 行内元素会在一条直线上排列,都是同一行,水平方向排列 块级元素独占一行,垂直方向排列.块级元素从新行开始结束接着一个断行 2.块级元 ...
- 03_ActiveMQ安全机制
[ActiveMQ安全机制] [ ActiveMQ的web管理界面 ] 地址 http://127.0.0.1:8161/admin ActiveMQ管理控制台使用jetty部署,所以需要修改密码, ...
- 【转】iOS lame编译 arm64 armv7s armv7 x86_64 i386指令集
原文出至 http://blog.csdn.net/vieri_ch/article/details/40650467 最近升级了系统到Mac OS X 10.10 并且更新了XCode6.1和iOS ...