下拉层

最新推荐文章于 2024-11-16 14:11:26 发布

年经的萝卜

最新推荐文章于 2024-11-16 14:11:26 发布

阅读量359

点赞数

文章标签： function layer border javascript mysql c

本文链接：https://blog.csdn.net/aa7455/article/details/5837525

版权

long_abc = ""; long_foc = 0; long_c = true; long_tem = ""; long_fx = ""; $(function() { $("#words").keyup(function() { if ($.trim($("#words").val()).length < 1) { $("#long_ul").hide(); long_c = true; } else if (long_abc != $.trim($("#words").val()) && (event.keyCode != 38 || long_c) && (event.keyCode != 40 || long_c)) { long_abc = $.trim($("#words").val()); $("#long_ul").hide(); $.get("/asearch.php?t=" + Math.random() + "&words=" + long_abc, function(d) { if (d != "") { var s=""; s="/"+long_abc+"/g"; d=d.replace(eval(s),"<b>"+long_abc+"</b>"); $("#long_ul").html(d); $("#long_ul").show(); long_foc = -1; $("#long_ul li").mouseover(function() { $("#words").val($(this).text()); $("#long_ul li").removeClass("long_f"); $(this).addClass("long_f"); long_foc = $("#long_ul li").index($(this)); long_c = false; }).click(function() { $("#long_ul").hide(); long_c = true; }); }; }); } else if (event.keyCode == 38 && $("#long_ul").html() != "") { if (long_c) { long_tem = $("#words").val(); long_foc = $("#long_ul li").length - 1; } if (long_fx == "down") { long_foc--; } long_fx = "up"; if (long_foc <= -1) { $("#long_ul li").removeClass("long_f"); long_foc = $("#long_ul li").length - 1; $("#words").val(long_tem); } else { long_foc--; $("#words").val($("#long_ul li:eq(" + (parseInt(long_foc) + 1) + ")").text()); $("#long_ul li").removeClass("long_f"); $("#long_ul li:eq(" + (parseInt(long_foc) + 1) + ")").addClass("long_f"); long_c = false; } } else if (event.keyCode == 40 && $("#long_ul").html() != "") { if (long_c) { long_tem = $("#words").val(); } if (long_fx == "up") { long_foc++; } long_fx = "down"; if (long_foc == $("#long_ul li").length - 1) { $("#long_ul li").removeClass("long_f"); long_foc = -1; $("#words").val(long_tem); } else { $("#words").val($("#long_ul li:eq(" + (parseInt(long_foc) + 1) + ")").text()); $("#long_ul li").removeClass("long_f"); $("#long_ul li:eq(" + (parseInt(long_foc) + 1) + ")").addClass("long_f"); long_foc++; long_c = false; } } }).blur(function() { $("#long_ul").hide(); long_c = true; }); $("#Long_Layer").css("top",$('#words').offset().top+20).css("left",$('#words').offset().left).width($('#words').width()+5); });

<mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body { text-align:center; } #Long_Layer{ position:absolute; z-index:100; height:auto; border:#CCCCCC solid 1px; background:#00CCFF; text-align:left } #long_ul{ list-style:none; margin:0px; cursor:default; } #long_ul li{ width:100% } .long_f{background:#0099FF; color:#FFFFFF}</style> <body> <form name="form1" method="get" action=""> <div style="width:360px;"> <input name="words" type="text" id="words" size="50" value="信"/> <div id="Long_Layer"> <ul id="long_ul"> </ul> </div> </div> <p>不会遮盖</p> </form> </body> <mce:script language="javascript"></mce:script>

$rst=mysql_query("select DISTINCT title from my_information where title like '%".$_GET['words']."%'"); while ($rs=mysql_fetch_assoc($rst)){ echo "<li>".$rs["title"]."</li>"; }