zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Thinkphp5 对接百度云对象存储 BOS (上传、删除)
    php 删除富文本编辑器保存内容中的其他代码(保留中文)
    ffmreg thinkphp 控制器 获取音频视频详细信息(获取时长)
    selenium+testng+java+poi进行excel的数据参数化
    linux中磁盘配额管理
    linux中挂载和卸载文件系统
    linux中vi编辑器的练习
    Linux基础命令
    Nginx流量复制
    Python脚本
  • 原文地址:https://www.cnblogs.com/softwareking/p/2076046.html
Copyright © 2011-2022 走看看