- 浏览: 111798 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
wuliupo:
这个有一个BUG,当有的td设置 background-col ...
【JQuery】鼠标经过表格行变色 -
cheeruplc:
使用了以上的方式 我用一个for循环多次输出alert 循环 ...
页面跳转 -
xbm376:
谢谢分享!
Gponit和GLatLng的区别 -
baiyejianxin:
king130520 写道 MXML是FLEX中的标记语言,与 ...
FLEX -
king130520:
...
FLEX
转载:http://www.cnblogs.com/samwu/archive/2011/06/29/2093761.html
上次看到国外那谁谁实现了Youtube的Instant搜索,据说花了三小时。
我笑了,我看了那篇文章后,自己花了三小时,实现了百度和优酷的Instant搜索体验。
难点在于,键盘输入的监听。用了JQuery自带的keyup函数,再加JS自带的setTimeout函数,较好地实现了效果。
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title ></ title >
< style type ="text/css" >
.hidden
{
display : none ;
}
.show
{
display : block ;
border : 0 ;
}
#up
{
margin : -100px 0 0 0 ;
width : 1300px ;
height : 900px ;
/* text-align:center; */
}
#getKey
{
height : 36px ;
width : 379px ;
font-size : large ;
}
</ style >
< script src ="JS/jquery-1.4.2-vsdoc.js" type ="text/javascript" ></ script >
< script type ="text/javascript" >
var baidu = 1 ; var youku = 0 ;
var getKey;
function gotothere() {
getKey = $( " #getKey " ).val();
if (getKey == "" ) {
// alert("sorry");
// $("up").className = "show";
}
else {
if (baidu == 1 ) {
$( " #up " ).attr( " src " , " http://www.baidu.com/s?wd= " + encodeURI(getKey) + " &inputT=624&ie=utf-8 " );
}
else if (youku == 1 ) {
$( " #up " ).attr( " src " , " http://www.soku.com/search_video/q_ " + getKey);
}
}
}
$( function () {
$( " #getKey " ).keyup( function () { // 监听键盘按下事件
var timer = setTimeout( " gotothere() " , 500 ); // 有时候键盘按得太快,监听事件来不及反应,所以用setTimeout函数来延迟
});
});
$( function () {
$( " #baidu " ).click( function () {
baidu = 1 ; youku = 0 ;
$( " #up " ).attr( " src " , " http://www.baidu.com/s?wd= " + encodeURI(getKey) + " &inputT=624&ie=utf-8 " );
});
$( " #youku " ).click( function () {
youku = 1 ; baidu = 0 ;
$( " #up " ).attr( " src " , " http://www.soku.com/search_video/q_ " + getKey);
})
})
</ script >
</ head >
< body style ="overflow-y: hidden;" >
请输入你想要搜索的关键字: < input id ="getKey" type ="text" />< a href ="#" id ="baidu" > 百度 </ a >   |   < a href ="#" id ="youku" > 优酷 </ a >< br />
< div style ="overflow:hidden" >< iframe id ="up" class ="show" frameborder ="0" ></ iframe ></ div >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title ></ title >
< style type ="text/css" >
.hidden
{
display : none ;
}
.show
{
display : block ;
border : 0 ;
}
#up
{
margin : -100px 0 0 0 ;
width : 1300px ;
height : 900px ;
/* text-align:center; */
}
#getKey
{
height : 36px ;
width : 379px ;
font-size : large ;
}
</ style >
< script src ="JS/jquery-1.4.2-vsdoc.js" type ="text/javascript" ></ script >
< script type ="text/javascript" >
var baidu = 1 ; var youku = 0 ;
var getKey;
function gotothere() {
getKey = $( " #getKey " ).val();
if (getKey == "" ) {
// alert("sorry");
// $("up").className = "show";
}
else {
if (baidu == 1 ) {
$( " #up " ).attr( " src " , " http://www.baidu.com/s?wd= " + encodeURI(getKey) + " &inputT=624&ie=utf-8 " );
}
else if (youku == 1 ) {
$( " #up " ).attr( " src " , " http://www.soku.com/search_video/q_ " + getKey);
}
}
}
$( function () {
$( " #getKey " ).keyup( function () { // 监听键盘按下事件
var timer = setTimeout( " gotothere() " , 500 ); // 有时候键盘按得太快,监听事件来不及反应,所以用setTimeout函数来延迟
});
});
$( function () {
$( " #baidu " ).click( function () {
baidu = 1 ; youku = 0 ;
$( " #up " ).attr( " src " , " http://www.baidu.com/s?wd= " + encodeURI(getKey) + " &inputT=624&ie=utf-8 " );
});
$( " #youku " ).click( function () {
youku = 1 ; baidu = 0 ;
$( " #up " ).attr( " src " , " http://www.soku.com/search_video/q_ " + getKey);
})
})
</ script >
</ head >
< body style ="overflow-y: hidden;" >
请输入你想要搜索的关键字: < input id ="getKey" type ="text" />< a href ="#" id ="baidu" > 百度 </ a >   |   < a href ="#" id ="youku" > 优酷 </ a >< br />
< div style ="overflow:hidden" >< iframe id ="up" class ="show" frameborder ="0" ></ iframe ></ div >
</ body >
</ html >
发表评论
-
分享33个优秀的 jQuery 教程
2011-07-06 09:19 899转载:http://www.cnblogs.com/lhb25 ... -
细说Cookie
2011-07-04 11:51 835转载:http://www.cnblogs.com ... -
jquery如何退出each循环的?
2011-06-24 14:37 1437在回调函数里return false即可,大多数jq的方法都 ... -
jquery获取当前鼠标的x、y位置
2011-05-25 11:49 2292<div id="testDiv&quo ... -
26个JQuery使用小技巧
2011-04-21 17:41 878The use of the jQuery library i ... -
JQuery UI Demo Darggable学习结果
2011-04-14 10:24 1398jQuery UI-Draggable 参数集合 jQu ... -
锋利的JQuery实例-用JQuery打造个性网站-详细页面
2011-03-18 17:25 1406<%@ Page Language="C#&q ... -
锋利的JQuery实例-用JQuery打造个性网站-首页
2011-03-18 17:23 1988<%@ Page Language="C#&q ... -
cookie插件
2011-03-12 09:45 776<!DOCTYPE HTML PUBLIC " ... -
去除左、右边空格
2011-03-12 09:37 819//插件编写 //调用时$.ltrim(string)去除左 ... -
css与attr、trigger()与toggle()的区别
2011-03-08 17:48 1334<select multiple=&quo ... -
复选框应用
2011-03-08 15:58 693前台用服务器控件CheckBoxList ... -
锋利的JQuery实例-视频展示效果
2011-03-07 17:14 1597<!DOCTYPE html PUBLIC " ... -
JQuery中动画效果的left值
2011-03-07 17:06 848//left: "+=50& ... -
JQuery事件对象的属性event
2011-03-03 11:35 1316event.type属性(获取事件的类型) $(&quo ... -
锋利的JQuery实例-图片提示效果
2011-03-02 16:41 1158<!DOCTYPE html PUBLIC " ... -
锋利的JQuery实例-超链接提示效果
2011-03-02 15:37 1144<!DOCTYPE html PUBLIC " ... -
锋利的JQuery学习笔记-认识JQuery
2011-03-02 15:09 9791.JQuery代码风格 链式操作风格 (1 ... -
js乱码解决方法
2009-03-25 13:19 1259有时候,我们在调用js文件的时候,会发现js文件里的中文变成乱 ... -
【JQuery】鼠标经过表格行变色
2009-03-11 13:52 6622[color=darkred][/color]<!DOC ...
相关推荐
instantclient_11_2 64位与32位压缩包下载地址(百度云) instantclient_11_2 64位与32位压缩包下载地址(百度云)
InstantSearch.js是一个JavaScript库,用于构建性能和即时搜索体验。 InstantSearch.js是一个普通JavaScript库,可让您使用的搜索API创建即时搜索结果体验。 它是InstantSearch系列的一部分: InstantSearch.js | | ...
Instant Client 11.2.0.4.0(Linux)集成了Linux 64位平台所有的Oracle Instant Client软件包 主要包含以下包: instantclient-basic-linux.x64-11.2.0.4.0.zip instantclient-jdbc-linux.x64-11.2.0.4.0.zip instant...
最新 instantclient-basic-linux.x64-11.2.0.4.0最新 instantclient-basic-linux.x64-11.2.0.4.0最新 instantclient-basic-linux.x64-11.2.0.4.0最新 instantclient-basic-linux.x64-11.2.0.4.0最新 instantclient-...
oracle instant client 32位,提供使用方法,链接如下: http://blog.csdn.net/s592652578/article/details/79447996
instantsearch.js, 用Algolia快速搜索你的应用 InstantSearch.js 是一个使用 Algolia 构建快速search-as-you-type搜索ui的库。InstantSearch.js 是InstantSearch家族的一部分: InstantSearch.js
Instant Client 11.2.0.4.0(Windows).rar 集成了所有的Oracle Instant Client Windows64位的包 包含以下包: instantclient-basic-windows.x64-11.2.0.4.0.zip instantclient-jdbc-windows.x64-11.2.0.4.0.zip ...
提供oracle客户端windows64客户端文件,PLSQL Developer客户端连接oracle服务端,一般需要在客户端单独安装oracle客户端,可通过下载该文件,配置oracle主目录和oci.dll,免去安装oracle客户端(根据服务端oracle版本...
上传的是一个百度链接,里面有包含windows、linux和aix的三种系统的instantclient x86和x64的包。
这是instantclient,这个可以代替oracle客户端的安装,它只是一个文件夹而已,非常轻量级。避免了对电脑运行造成压力。
它是InstantSearch系列的一部分: ReactInstantSearch | | | | | 为什么如果要执行以下操作,则应使用React InstantSearch: 利用最佳实践设计搜索体验随意定制组件遵循React原则安装React InstantSearch在npm...
Oracle Instant Client windows大全 包含32位64位各版本 instantclient-basic-win32-10.1.0.5-20060419 instantclient-basic-win32-10.2.0.5 instantclient-basic-win32-11.1.0.7.0 instantclient-basic-nt-11.2....
instantclient_11_2