html页面 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jQuery AUTOCOMPLETE ORDER BY CNTLIS</title> <mce:script language="javascript" src="js/jquery.js" mce_src="js/jquery.js"></mce:script> <mce:script language="javascript" src="js/jq.complete.js" mce_src="js/jq.complete.js"></mce:script> <mce:style type="text/css"><!-- --></mce:style><style type="text/css" mce_bogus="1"> </style> <mce:script language="javascript" type="text/javascript"><!-- $(function() { $("#Keyword").AutoComplete("AutoCompleteData.aspx?key="+$("#Keyword").val(),""); }); //end document.ready // --></mce:script> <link href="js/jq.dimensions.css" mce_href="js/jq.dimensions.css" rel="stylesheet" type="text/css" /> </head> <body> <table width="500" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="330" style="height: 47px"> <div id="content"> <input name="Keyword" type="text" id="Keyword" size="50" maxlength="30" autocomplete="off" style="height: 27px" /> <br /> </div> sdfsdfsdfsdf </td> </tr> </table> </body> </html> AutoCompleteData.aspx 后台代码 string key = Request.QueryString["Keyword"]; string connectionString = "server=.;database=aaaa;uid=sa;pwd=sasa"; SqlConnection connection = new SqlConnection(connectionString); string sql = "select top 10 title from news where title like'%" + key + "%'"; SqlCommand command = connection.CreateCommand(); command.CommandText = sql; connection.Open(); StringBuilder items = new StringBuilder(); using (SqlDataReader reader = command.ExecuteReader()) { Response.Write("{'keylist':["); while (reader.Read()) { items.Append("{'keyname':'" + reader.GetString(0) + "','keyextend':''},"); } } Response.Write(items.ToString()); Response.Write("{'keyname':'" + key + "10'}]}"); Response.End(); jquery 代码 /* * jQuery AutoComplete * * Author: cntlis * http://blog.csdn.net/cntlis * * Licensed like jQuery, see http://docs.jquery.com/License * * 作者:cntlis * QQ:8112857 */ $.fn.AutoComplete = function(url,option){ var me= this; var strKey= $(me).val(); var strKeyBak= ""; var isShow = false; var doption={ iwidth: '0px', //下拉框的宽度 iLengthLower: 1, //当表单的长度大于iLengthLower小于iLengthUpper时才开始执行搜索 iLengthUpper: 50, strPara: "Keyword", //变量名称 zIndex: 1, //提示框的Z-INDEX值 hasscroll: 0, //是否出现滚动条0无1有 hasclose:0, //是否拥有关闭窗口 desfun:function(){} }; $.extend(doption,option); var iLengthLower= doption.iLengthLower; var iLengthUpper= doption.iLengthUpper; var strPara= doption.strPara; if ($("#autocomplete").length<1){$("body").append("<div id='autocomplete' class='autocompletefloor'></div>");} $("#autocomplete").hide(); $(me).keyup(function(e){keysearch(e.keyCode);}); $(me).keydown(function(e){LineSelect(e.keyCode);}); $(me).bind("blur",function(){ strKeyBak= $("#autocomplete ul .selected .keyname").text(); //为click事件增加处理 if (strKeyBak.length>0 && strKeyBak!=$(me).val()){ $(me).val(strKeyBak); doption.desfun(); }; floorHide(); }); var encode=function(v){//如果包含中文就escape,避免重复escape) return escape(v).replace(//+/g, '%2B').replace(//"/g,'%22').replace(//'/g, '%27').replace(g,'%2F'); } function floorHide(){ $("#autocomplete").hide().html(""); strKey= ""; isShow = false; } function floorShow(){ var p= $(me).offset(); var w= (doption.iwidth == "0px") ? $(me).width()+2 : doption.iwidth; $("#autocomplete").css({ 'z-index:':doption.zIndex, width:w, top:parseInt(p.top+$(me).outerHeight())+"px", left:parseInt(p.left)+"px" }).show(); strKey= ""; isShow = true; } function keysearch(code){ var strKeyNow=$(me).val(); if(code == 38 || code == 40 || code == 13 || code == 27 || code == 9) return; //TAB/回车、ESC、向上、向下 if((strKey == "" || strKeyNow != strKey) && strKeyNow.length >= iLengthLower && strKeyNow.length <= iLengthUpper){ $.ajax({ type: "Get", dataType: "json", url: url, data: strPara != "" ? strPara + "=" + encode(strKeyNow) : "", success: function(json){ json=json.keylist; if (json.length>0){ //获取搜索数据 var strContent= "<ul>"; $.each(json, function(i, n){ if(n.keyname.length>0){ //如果 //alert(n.keyname); strContent+= '<li class="keyinfo"><span class="keyname">'+n.keyname+'</span>'; try{ if (n.keyextend.length>0){strContent+='<span class="keyextend">'+n.keyextend+'</span>';} }catch(E){}; strContent+= '</li>'; }; }); if (doption.hasclose==1){ strContent+= '<li class="close"><span>关闭</span></li>'; } strContent+='</ul>'; $("#autocomplete").html(strContent); $("#autocomplete .keyinfo").mouseover(function(){$("#autocomplete .selected").removeClass("selected");$(this).removeClass("unselected").addClass("selected");}).mouseout(function(){$(this).removeClass("selected").addClass("unselected");}).click(function(){if(strKeyBak.length()>0){$(me).val(strKeyBak);}}); floorShow(); }else{ //没有搜索数据 floorHide(); return; } } }); strKey=$(me).val(); } if(strKey.length == 0 || strKey.length <= iLengthLower || strKey.length >= iLengthUpper) floorHide(); } function LineSelect(code){ if(code == 27){floorHide();};//回车键、ESC键 if(code == 13){floorHide();doption.desfun();}; if(!isShow) return; ObjSelected=$("#autocomplete ul .selected"); if (ObjSelected.length>0){ //如果已经有选定 //alert('dasfdas'); if(code == 38){ //向上键 if(ObjSelected.prev().text() != ""){ //如果不是第一个数据 ObjSelected.removeClass("selected").addClass("unselected").prev().removeClass("unselected").addClass("selected"); $(me).val($("#autocomplete ul .selected .keyname").text()); }else{ ObjSelected.removeClass("selected").addClass("unselected"); $("#autocomplete .keyinfo:last").removeClass("unselected").addClass("selected"); $(me).val($("#autocomplete ul .selected .keyname").text()); } }else if (code == 40){ //向下键 if(ObjSelected.next().text() != ""){ //如果不是第一个数据 ObjSelected.removeClass("selected").addClass("unselected").next().removeClass("unselected").addClass("selected"); $(me).val($("#autocomplete ul .selected .keyname").text()); }else{ ObjSelected.removeClass("selected").addClass("unselected"); $("#autocomplete .keyinfo:first").removeClass("unselected").addClass("selected"); $(me).val($("#autocomplete ul .selected .keyname").text()); } } }else if(code == 38){ $("#autocomplete .keyinfo:last").removeClass("unselected").addClass("selected"); $(me).val($("#autocomplete .keyinfo:last .keyname").text()); }else if(code == 40){ $("#autocomplete .keyinfo:first").removeClass("unselected").addClass("selected"); $(me).val($("#autocomplete .keyinfo:first .keyname").text()); } } } 样式表代码 #autocomplete li { PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px } #autocomplete { border: 1px solid WindowFrame; background-color: Window; position: absolute; } /*每行的格式*/ #autocomplete li { display: block; text-align: left; font-size: 12px; height: 20px; line-height: 20px; background-color: #fff; cursor: default; padding: 0 5px; clear: both; } /*鼠标选中时的格式*/ #autocomplete .selected { background-color: #565da9; color: #fff; overflow: hidden; } /*鼠标离开时代格式*/ #autocomplete .unselected { background-color: #fff; color: #666; } /*关键字信息*/ #autocomplete .keyname { display: block; float: left; } /*关键字扩展信息*/ #autocomplete .keyextend { display: block; float: right; color: green; } #autocomplete .unselected .keyextend { color: green; } #autocomplete .selected .keyextend { color: #fff; } /*关闭*/ #autocomplete .close { text-align: right; } #autocomplete .close span { color: blue; cursor: pointer; text-decoration: underline; }