设计场景：
Ben最近负责的购书网出现了一点小问题，有很多客户抱怨说他们的搜索不够智能，因为网站有一个比较大的版块是关于老年人生活的书籍列表，这些老年人并不能够很清楚的记住他们所要查找书籍的完整名称...而网站的模糊搜索却无法提供有效的提示，这使得搜索存在很大的不足，于是公司要求Ben来解决这个问题。Ben的想法是做个有效地，及时的弹出层，当用户搜索的时候，随着用户键入的内容的变化，把数据库对应相似的信息不断的调出，返回给用户，这样就能的给用户提供及时有效的提示信息...
设计目标：
提供有效的，及时的提示，方便用户查找信息...
解决方案：
给出的原始界面如下：
第一步，我们先写一个储备样式，这个样式应用于弹出的数据提示层的..
代码
#searchDiv
{
position:absolute;//绝对定位
z-index:999;//元素的叠加次序，让它显示在其他元素之上
border:solid 1px lightblue;
background-color:#ffffff;
}
#searchDiv p
{
height:30px;
width:362px;
margin:0px;
padding:0px;
vertical-align:text-bottom;
font-size:13px;
font-weight:bolder;
cursor:pointer;
}
下面是脚本，在键盘按键释放时，我们根据txtSearch中的内容来动态查询数据库的信息，将有关的信息全部调出，追加一个层，并把信息显示在层里面
代码
$("#txtSearch").keyup(function(event){
if(event.keyCode!="38" && event.keyCode!="40")//排除向上和向下键，以避免跟Document的keyup起冲突
{
pointRow=-1;//这句话很重要，重置pointRow的值，因此当txtSearch中的搜索内容改变时，不会使用上次的pointRow脏数据
//下面这段话用以设置搜索结果的信息框的位置，它紧贴在txtSearch这个查找框的下面，形成一个下拉的假象
$("#searchDiv").remove();
var leftS=$(this).offset().left;
var topS=$(this).offset().top+$(this).height()+4;
var widthS=$(this).width()+2;
//开始执行查找结果的载入
if($(this).val()!="")
{
var waiting="<img src='./images/loading.gif'/> 数据载入中！";//这边设置延迟载入的内容
searchDiv(leftS,topS,widthS,waiting);//加载显示一个延迟框
$.ajax({ //利用Ajax调用Web服务中的数据，实现与后台交互
type: "POST",
contentType:"application/json;utf-8",
url: "./WebService.asmx/GetDate",
data:"{searchStr:'"+$(this).val()+"'}",
dataType: 'json',
anysc:false,
success:function(data)
{
//XmlHttpRequest向服务器发送请求，并将获取最终的数据
if(data.d !="")
{
setTimeout(function(){ //为了显示延迟效果，这边故意自己设置了0.3秒的延迟，0.3秒结束后，将后台的数据载入，替代了信息延迟提示框的内容...
$("#searchDiv").remove();//去除信息延迟提示框
searchDiv(leftS,topS,widthS,data.d); //加载最终从后台提取的内容
},300);
}
else $("#searchDiv").remove();
}
})
}
else $("#searchDiv").remove();
}
})//追加的信息弹出层
function searchDiv(leftS,topS,widthS,dataS)
{
var popDiv="<div id='searchDiv'>"+dataS+"</div>";
$('body').append(popDiv);
$("#searchDiv").css({"left":leftS,"top":topS,"width":widthS,"height":"auto"});
}
执行顺序如下：
（1）当从搜索框中键入需要查找的内容时，我们先调用的是延迟框，提示数据延迟显示，如下图：
（2）如果Ajax调到的后台数据不为空的话，则显示数据，否则关闭该延迟框...
有调用到数据时如图：
无调用到数据时如图：
脚本中的Ajax跟后台的关系如下： 
（3）弹出层虽然调出来了，但是我们还是不能对它进行操作，因此我们在再写三个js函数sel、unsel、clickS，分别是鼠标经过，离开和点击弹出层对应行的时候执行的操作,
这三个js函数我们在WebService中有相应调用...
代码
//鼠标经过函数
function sel(ids)
{
$("#"+ids).css("background-color","#e2eaff");
}
//鼠标离开函数
function unsel(ids)
{
$("#"+ids).css("background-color","#ffffff");
}
//鼠标点击时执行的事件
function clickS(ids)
{
$("#txtSearch").val($("#"+ids+" B").html());
$("#searchDiv").remove();
}
效果如下：
当鼠标移至相应行，相应行的背景色变化，并将该行的数据填充到搜索框...
点击相应行，执行查询
（5）使用键盘的上下键进行操作（这样，当鼠标向上或向下的时候就可以执行相应的行选择）
脚本如下：
代码
pointRow=-1;//用以获取和设置位置指标，全局变量
$(document).keyup(function(event){
var len= $("#searchDiv p").length;//获取自动搜索的行数
//键盘向上键触发的事件，向上键在keyCode中的代码为38
if(event.keyCode=="38")
{
if(pointRow==-1)
{
pointRow=len-1;
$("#searchDiv p").eq(pointRow).css("background-color","#e2eaff");//如果是首次载入，向上键指向最后一行，背景色变化
$("#txtSearch").val($("#searchDiv p").eq(pointRow).children("B").html());//将选中的行的内容填充进搜索框
}
else
{
$("#searchDiv p").eq(pointRow).css("background-color","#ffffff");//去掉背景色
if(pointRow==0) pointRow=len-1; else pointRow=pointRow-1;//判断，如果到顶了，则跳到最后一行重新开始
$("#searchDiv p").eq(pointRow).css("background-color","#e2eaff");//指向上一行数据
$("#txtSearch").val($("#searchDiv p").eq(pointRow).children("B").html());//并将选中的行的内容填充进搜索框
}
}
//键盘向下键触发的事件，该键在keyCode中的代码为40
if(event.keyCode=="40")
{
if(pointRow==-1)
{
pointRow=0;
$("#searchDiv p").eq(pointRow).css("background-color","#e2eaff");//如果是首次载入，向下键指向第一行，背景色变化
$("#txtSearch").val($("#searchDiv p").eq(pointRow).children("B").html());//将选中的行的内容填充进搜索框
}
else
{
$("#searchDiv p").eq(pointRow).css("background-color","#ffffff");//去掉背景色
if(pointRow==len-1) pointRow=0; else pointRow=pointRow+1;//判断，如果到尾了，则跳到第一行重新开始
$("#searchDiv p").eq(pointRow).css("background-color","#e2eaff");//指向下一行数据
$("#txtSearch").val($("#searchDiv p").eq(pointRow).children("B").html());//并将选中的行的内容填充进搜索框
}
}
})
这时候，我们在form中这样设置
<form id="form1" runat="server" defaultbutton="btnSearch">
其实就是定义了回车键的默认控件，所以当我们确认要执行的数据时，我们按下Enter键，功效跟点击btnResearch是一样的，即执行查询...
设计小结：
时间紧迫，脚本写的很粗糙，当总归是实现了，在写这个设计时候，遇到了一个问题，就是keyup冲突，所以我上面把它们分开，分别有$(Document).keyup
和 $("#txtResearch").keyup,一个用来上下选择，一个用来键入搜索内容的...其实可以解决的，但是我比较懒，所以就不去深究了...
之前有看了一下百度的实现方法，它是在下面追加 一个table。然后每个搜索条目用一个<tr>来装，百度这样处理相对样式好控制，反正比我这高明多了，有兴趣也可以去看一下...
后台我采用xml来存取数据，还写了个添加数据的页面，这样相对于简单，如果用SQl，附件一传上来就好大，太占空间了...
最终实现如下：
