Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

恭喜Java学习者论坛(https://www.javaxxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,购买链接:点击进入购买VIP会员
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习(CNN RNN GAN)算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万!人工智能学习路线教程

年薪50万!大数据从入门到精通学习路线年薪50万!机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
查看: 1013|回复: 0

jQuery JavaScript实现百度搜索下拉框效果

[复制链接]

该用户从未签到

发表于 2011-10-18 17:20:54 | 显示全部楼层 |阅读模式
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>仿百度搜索的下拉框效果</title>
<style type="text/css">
#search_id{font-size:12px; color:#333333}
#search_id div{ float:left}
#search_body{ border:1px solid #999999; padding-top:0px; width:240px; }
#search_body input{ height:18px; margin-top:0px;}
#search_body #searchkey_id{ width:238px; border:0px; border-bottom:1px solid #999999;}
#result_id{ padding-top:0px; width:100%;display:none;}
#result_id table{ width:100%; }
#result_id table tr td:hover{background-color:#FF9999; cursor:pointer }

</style>
</head>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript"">

$(function(){
   var close = true ;
   $("#searchkey_id").keyup(function(){
    var nkey = $.trim($(this).val()) ;
    if("" == nkey || null == nkey){
     $("#result_id").hide() ;
    }
    else {
    //html 为ajax请求 返回的 字符串
     var html = '<table><tr><td>1dfdfdfdf</td></tr><tr><td>12dfdfdf2</td></tr><tr> <td>121212</td></tr></table>'
     $("#result_id").show() ;
     $("#result_id").html(html);
     $("#result_id table tr td").click(function(){
      $("#searchkey_id").val($(this).html()) ;
      $("#result_id").hide() ;
     }).hover(
      function () {
          //$("#searchkey_id").blur(function(){});
       //alert(123) ;
       close = false ;
      },
      function () {
          //$("#searchkey_id").blur(function(){
        //$("#result_id").hide() ;
       //});
       //alert(312) ;
       close = true ;
      }
     ); ;
    }
   }).blur(function(){
    if(close) {
     $("#result_id").hide() ;
    }
   });

   $("#botton_id input").click(function(){
    alert(232323) ;
   });
});
</script>
<body>

<div id="search_id">
   <div id="search_body">
    <input name="searchkey" type="text" id="searchkey_id" size="30" />
     <div id="result_id">

     </table>
    </div>
   </div>
   <div id="botton_id"> <input type="button" value="搜索" /></div>


</div>
</body>
</html>
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|Java学习者论坛 ( 声明:本站资料整理自互联网,用于Java学习者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

GMT+8, 2025-1-8 13:20 , Processed in 0.321934 second(s), 36 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表