Web前端设计模式构建Ajax智能搜索... Hello

设计场景：

        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'/>&nbsp;&nbsp;数据载入中！";//这边设置延迟载入的内容
         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，附件一传上来就好大，太占空间了... 

最终实现如下：

点击下载源码（https://files.cnblogs.com/wzh2010/AjaxSearch.rar）