以前看见百度搜索这种功能感觉很炫，自己想做一个出来备用，试着做过没有做出来，这次项目必须要用就做了一个demo出来，比较简陋但是可以再此基础上做修改应该比较容易了，现在发出来分享给大家。也不知道这个算不算用了ajax）。
1、首先是要查询的后台数据，直接用了写死的数据，要变化也容易了
View Code
protected void Page_Load(object sender, EventArgs e) { WriteResult(); } private void WriteResult() { string strurl = Request.RawUrl; List<string> strList = new List<string>(); strList.Add("成都"); strList.Add("广都"); strList.Add("京都"); strList.Add("都督"); strList.Add("都护"); strList.Add("拿督"); List<string> list=new List<string>(); string strRequest = string.Empty; strRequest = Request.QueryString[0].Trim(); if (string.IsNullOrEmpty(strRequest)) { Response.Write(";"); return; } foreach (string item in strList) { if (item.Contains(strRequest)) list.Add(item); } string strResult = string.Empty; foreach (string value in list) { strResult += value + ";"; } Response.Write(strResult); }
2、搜索提示的前台页面
View Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!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 runat="server"> <title>搜索提示框演示（一）</title> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> // function fun() // { // document.getElementById("txtDate").innerText="A"; // } // // function ClearAll() // { // document.getElementById("txtDate").innerText="AAA"; // document.getElementById("txtd").innerText="BBB"; // return false; // } // // window.onload=function() // { // document.getElementById("txtDate").innerText="gg"; // document.getElementById("txtd").value="uuuuu"; // // document.getElementById("txtmsg").value=document.getElementById("txtDate").innerHTML; // } // var array=new Array(); //定义一个全局变量数组，用来存放拆分字符串的值，后面具体介绍。 var zz=-1; //此为指针，后面用到 var count=-1;//搜索结果个数 var keyupdown=-1;//记录键盘 onkeyup 和onkeydown function xmlHttpInitializtions() { try { xmlhttpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { xmlhttpRequest = false; } } if (!xmlhttpRequest && typeof XMLHttpRequest != 'undefined') { xmlhttpRequest = new XMLHttpRequest(); } } function beKeydown() { // if(event.keyCode==38||event.keyCode==40) // { // for(var l=0;l<count;l++) // { // document.getElementById("item" + l).className="item_normal"; // } // beShow(); // return false; // } } function beKeyUp() { if(event.keyCode==37||event.keyCode==39) return false; if(event.keyCode==38||event.keyCode==40) { for(var l=0;l<count;l++) { document.getElementById("item" + l).className="item_normal"; } beShow(); return false; } var key = document.getElementById("txtSearch").value; if(key.length>0)//有值才POST，这里最好加个Trim()方法，但是JAVASCRIPT没有现成的方法，自己定义。 { xmlHttpInitializtions(); document.getElementById("txtmsg").value=key; xmlhttpRequest.Open("Post","GetResult.aspx?name=" + encodeURI(key),true);//POST xmlhttpRequest.onreadystatechange=stateChange;//返回状态调用方法stateChange xmlhttpRequest.Send(); } else { document.getElementById("search_suggest").innerHTML=""; } } function stateChange() { if(xmlhttpRequest.readystate==4) { if(xmlhttpRequest.status==200) { var responseStr=xmlhttpRequest.responseText;//获取返回值 document.getElementById("search_suggest").style.display="block"; count=-1; if(responseStr.length>0)//返回值不为空才执行下面的代码 { array=responseStr.split(';');//根据‘|’拆分，根据自己任意特殊字符，初始化数组 positionDiv();//调用方法，定位DIV显示，具体见方法解释 document.getElementById("search_suggest").innerHTML="";//每次清空DIV内容 count=array.length-1;//------------------ for(var i=0;i<array.length;i++) { if(array[i]!=""&&array[i]!=" ")//项值不为空，组合DIV，每个DIV有onmouseover、onmouseout、onclick对应事件 { if(i<array.length-2) document.getElementById("search_suggest").innerHTML+="<div id='item" + i + "' class=' itemBg' onmouseover=' beMouseOver(" + i +")' onmouseout=' beMouseOut(" + i + ")' onclick=' beClick(" + i + ")'>" + array[i] + "</div>"; else document.getElementById("search_suggest").innerHTML+="<div id='item" + i + "' class='itemBg' style='border-bottom: #666 1px solid;' onmouseover='beMouseOver(" + i +")' onmouseout='beMouseOut(" + i + ")' onclick='beClick(" + i + ")'>" + array[i] + "</div>"; } document.getElementById("txterror").value+=document.getElementById("search_suggest").innerHTML; } //document.getElementById("txterror").value=document.getElementById("search_suggest").innerHTML; 为什么这儿取不到值呢？ } else { document.getElementById("search_suggest").style.display="none"; } } } } //定位DIV显示 function positionDiv() { var DivRef= document.getElementById("search_suggest"); DivRef.style.position = "absolute"; var t=document.getElementById("txtSearch"); DivRef.style.top= getAbsolutePos(t).y;//相对文本框的TOP高度，方法见下面 DivRef.style.left= getAbsolutePos(t).x ;//相对文本框的LEFT宽度 DivRef.style.height=(array.length-1) * 20;//DIV的高度等于每行20个象素乘行数（也就是数组的长度，体现全局数组的作用，不然要传入数组长度的参数） } //实现最后一个DIV 关闭 onclick方法 function hiddenDiv() { document.getElementById("search_suggest").style.display="none"; } //定位方法，不做解释 function getAbsolutePos(el) { var SL = 0, ST = 0; var is_div = /^div$/i.test(el.tagName); if (is_div && el.scrollLeft) SL = el.scrollLeft; if (is_div && el.scrollTop) ST = el.scrollTop; var r = { x: el.offsetLeft - SL, y: el.offsetTop - ST }; if (el.offsetParent) { var tmp = this.getAbsolutePos(el.offsetParent); r.x += tmp.x; r.y += tmp.y; } return r; } //最后是鼠标效果的方法。 //函数鼠标经过效果 function beMouseOverEFF(i) { if ((i>=0)&(i<=array.length-1)) { document.getElementById("item" + i).className="item_high"; } } //函数鼠标移开效果 function beMouseOutEFF(i) { if ((i>=0)&(i<=array.length-1)) { document.getElementById("item" + i).className="item_normal"; } } //函数鼠标经过 function beMouseOver(i) { document.getElementById("txtSearch").focus(); for(var l=0;l<count;l++) { document.getElementById("item" + l).className="item_normal"; } //beMouseOutEFF(zz); zz=i; beMouseOverEFF(zz); } //函数鼠标移开 function beMouseOut(i) { beMouseOutEFF(i); } //函数单击 function beClick(i) { document.getElementById("txtSearch").value=array[i]; document.getElementById("search_suggest").style.display="none"; document.getElementById("txtSearch").focus(); } //点击页面其他位置关闭搜索结果 function beClose() { document.getElementById("search_suggest").style.display="none"; } //上下键盘 function beShow() { if(event.keyCode==38) { zz=(zz+count-1)%count; document.getElementById("item" + zz).className="item_high"; document.getElementById("txtSearch").value=document.getElementById("item" + zz).innerHTML; return false; } else if(event.keyCode==40) { zz=(zz+count+1)%count; document.getElementById("item" + zz).className="item_high"; document.getElementById("txtSearch").value=document.getElementById("item" + zz).innerHTML; return false; } else if(event.keyCode==13) { alert(13); } } </script> <style type="text/css"> .item_normal { BORDER-LEFT: #666 1px solid; BORDER-RIGHT: #666 1px solid; width:204px; background-color:#ffffff; overflow:visible; } .itemBg { BORDER-LEFT: #666 1px solid; BORDER-RIGHT: #666 1px solid; cursor:default; background-color:#ffffff; width:204px; } .item_high { background-color:#326BC5; BORDER-LEFT: #666 1px solid; BORDER-RIGHT: #666 1px solid; cursor:default; width:204px; color:white; } .item_button { BORDER-LEFT: #666 1px solid; BORDER-RIGHT: #666 1px solid; BORDER-BOTTOM: #666 1px solid; text-align:right; background-color:#ffffff; width:204px; cursor:hand; } .suggest_hidden { display:none; } </style> </head> <body style="height: 100%; 100%;" onclick="beClose();"> <form id="form1" runat="server"> <asp:TextBox ID="txtSearch" runat="server" autocomplete="off" onkeyup="return beKeyUp();" onkeydown="beKeydown();" Width="200px"></asp:TextBox> <div id="search_suggest" style="position: absolute; z-index: 1; padding: 22px 0px 0px 0px;"> </div> <asp:Button ID="btnSearch" runat="server" Text="查询" /> <asp:TextBox ID="txtmsg" runat="server"></asp:TextBox> <asp:TextBox ID="txterror" runat="server" Width="700px" Height="500px" TextMode="MultiLine"></asp:TextBox> </form> </body> </html>
对js不太熟悉，做起来很吃力，在VS2005调试就更悲催了。目前任然没解决的是onkeydown事件的处理（一直按住一个键），先触发onkeydown然后是onkeyup。。。希望大家指点指点或者提出各种意见。
PS：不知道百度用的什么方式整出来的。。。