仿Google自动提示SearchSuggess
| : 20px; WIDTH: 97px; FLOAT: right; HEIGHT: 20px; COLOR: #008000} .sokeyup_4 { LINE-HEIGHT: 20px; WIDTH: 237px; HEIGHT: 20px } .sokeyup_5 { LINE-HEIGHT: 20px; FLOAT: right; HEIGHT: 20px; COLOR: #0000cc; CURSOR: pointer; TEXT-DECORATION: underline}
js:
function so_search(){ var kw = $("#kw").val(); var kid = 0; var kname=$("#select_kid").html(); kw = encodeURI(kw); if(kw == ''''){ alert("请输入要查找的关键词"); }else{ location.href="search-"+kw+".html"; } } //关闭搜索提示 function keyup_close(){ $("#keyup_d").hide(); } // function keyup_over(id){ $("#u_"+id).css("background-color","#0000CC"); $("#l_"+id).css("color","#fff"); } function keyup_out(id){ $("#u_"+id).css("background-color","#fff"); $("#l_"+id).css("color","#000"); } function keyup_click(id){ $("#keyup_d").hide(); var kw=$("#l_"+id).html(); kw = encodeURI(kw); location.href="search-"+kw+".html"; } function keyup(event){ if(window.event){ var key =window.event.keyCode; }else{ var key =event.which; } if(key!=38&&key!=40&&key!=13){ var kw=$("#kw").val(); //跨域获取搜索提示 var url ="JsonHandler.ashx?kw=" + encodeURI(kw) + "&time=" + new Date().toString();//中文 $.get(url,function(data){ if (data!='''') { $("#keyup_d").html(data+''<ul class="sokeyup_4"><li id="l_0" style="display:none;"></li><li class="sokeyup_5" onclick="keyup_close()">关闭</li></ul>''); $("#keyup_d").show(); } else { $("#keyup_d").hide(); } } ); } } var ul_id=0; $(window).keydown(function(event){ if(window.event){ var key =window.event.keyCode; }else{ var key =event.which; } if (key==13) { if (searchFocus == true) { } } var ulcount=$("#keyup_d ul").size()-1; if($("#keyup_d").css("display")=="block"){ //向上 $("#l_0").html($("#kw").val()); if(key==13) { if ($("#kw").val()!= "") { so_search(); } } if (key==38) { ul_id--; if(ul_id<0){ ul_id = ulcount; keyup_over(ul_id); }else{ keyup_out(ul_id+1); keyup_over(ul_id); } $("#kw").val($("#l_"+ul_id).html()); return false; } //向下 if (key==40 ) { $("#l_0").html($("#kw").val()); ul_id++; if(ul_id>ulcount){ ul_id=0; keyup_out(ulcount); }else{ keyup_out(ul_id-1); keyup_over(ul_id); } $("#kw").val($("#l_"+ul_id).html()); return false; } } }); ashx:<%@ WebHandler Language="C#" Class="JsonHandler" %> using System; using System.Web; using System.Data.SqlClient; using System.Data; public class JsonHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; st |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
