ASP.NET智能提示（一）

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

设计场景：
Ben最近负责的购书网出现了一点小问题，有很多客户抱怨说他们的搜索不够智能，因为网站有一个比较大的版块是关于老年人生活的书籍列表，这些老年人并不能够很清楚的记住他们所要查找书籍的完整名称...而网站的模糊搜索却无法提供有效的提示，这使得搜索存在很大的不足，于是公司要求Ben来解决这个问题。Ben的想法是做个有效地，及时的弹出层，当用户搜索的时候，随着用户键入的内容的变化，把数据库对应相似的信息不断的调出，返回给用户，这样就能的给用户提供及时有效的提示信息...


设计目标：
     提供有效的，及时的提示，方便用户查找信息...


解决方案：
   给出的原始界面如下：
  
   第一步，我们先写一个储备样式，这个样式应用于弹出的数据提示层的..


代码

下面是脚本，在键盘按键释放时，我们根据txtSearch中的内容来动态查询数据库的信息，将有关的信息全部调出，追加一个层，并把信息显示在层里面

代码

执行顺序如下：
（1）当从搜索框中键入需要查找的内容时，我们先调用的是延迟框，提示数据延迟显示，如下图：


（2）如果Ajax调到的后台数据不为空的话，则显示数据，否则关闭该延迟框...
有调用到数据时如图：



无调用到数据时如图：


脚本中的Ajax跟后台的关系如下：

（3）弹出层虽然调出来了，但是我们还是不能对它进行操作，因此我们在再写三个js函数sel、unsel、clickS，分别是鼠标经过，离开和点击弹出层对应行的时候执行的操作,
         这三个js函数我们在WebService中有相应调用...

代码


效果如下：
当鼠标移至相应行，相应行的背景色变化，并将该行的数据填充到搜索框...



点击相应行，执行查询



（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）