none
【AJAX】仿Google Suggest 功能的一些问题 RRS feed

  • 问题

  • 遇到一个很奇怪的问题,页面的onkeydown事件会触发文本框的onkeyup事件呢?代码如下:

     

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>



    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>无标题页</title>
       
        <style type="text/css">
        .search_suggest
        {
            border-left:solid 1px #1E97B6;
            width:148px;
            border-right:solid 1px #1E97B6;
            border-bottom:solid 1px #1E97B6;
            margin-top:0px;
     
            }
       
       
        </style>
       
       
        <script type="text/javascript">
       
       
           //创建xmlHttp对象
           function createXMLHTTP()
                {
                var xmlHttp=null;
                      try
                      {
                      xmlHttp=new ActiveXObject("MSXML2.XMLHTTP");
                      }
                      catch(e)
                      {
                      try
                      {
                      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                      }
                      catch(e2)
                      {
                     // xmlHttp=false;
                      }
                      }
                     if(!xmlHttp && typeof XMLHttpRequest!='undefined')
                      {
                      try
                      {
                      xmlHttp=new XMLHttpRequest();
                      }
                      catch(e)
                      {
                     // xmlHttp=false;
                      }
                       
                      }
                      return xmlHttp;
                }
               
       
         var objxml=createXMLHTTP(); //声明全局变量
        
       function change_key()
       {
      
           
                var str = document.getElementById("txt_key").value;
                objxml.open("GET","search.ashx?key="+str+"&r="+Math.random() ,true);
                objxml.setRequestHeader('Content-type','application/x-www-form-urlencoded');
                objxml.onreadystatechange = handSearchRequest;
                objxml.send(null);
           

       }




    function handSearchRequest()
    {
        if (objxml.readyState == 4)
        {
            var div = document.getElementById("search_suggest");
            div.innerHTML = "";
            var strLength=objxml.responseText;
            if(strLength.length>0)
            {
                document.getElementById("search_suggest").className="search_suggest";
                var str = objxml.responseText.split("|");
                var elements="";
                for (var i=0; i<str.length; i++)
                {
                    elements+="<tr><td>"+str[i]+"</td></tr>";
                }
                div.innerHTML="<table id='tb'>"+elements+"</table>";
               
                //alert(div.innerHTML);
            }
            else
            {
                document.getElementById("search_suggest").className="";//没有数据去掉class
            }

        }

    }


    var rowNo= 0;
    var tableId = 'tb';
    var inputId = 'txt_key';
    var selectedColor = "#1E97B6"
    function  suggestPress() 
    {

        if (event.keyCode == 38)
        {   
            //alert(document.getElementById(tableId).rows.length);
         
            for(var k=0;k<document.getElementById(tableId).rows.length;k++)
            {
               
                document.getElementById(tableId).rows(k).bgColor="#FFFFFF";
            }
            if(rowNo == 0)
            {
                 rowNo++;
            }
           
            document.getElementById(tableId).rows(--rowNo%document.getElementById(tableId).rows.length).bgColor=selectedColor;
            document.getElementById(inputId).value=document.getElementById(tableId).rows(rowNo%document.getElementById(tableId).rows.length).innerText;
        }

        if (event.keyCode== 40)
        {
       
        
           
            for(var k=0;k<document.getElementById(tableId).rows.length;k++)
            {
                document.getElementById(tableId).rows(k).bgColor="#FFFFFF";
            }
            document.getElementById(tableId).rows(++rowNo%document.getElementById(tableId).rows.length).bgColor=selectedColor;
            document.getElementById(inputId).value=document.getElementById(tableId).rows(rowNo%document.getElementById(tableId).rows.length).innerText; 
           
           
           
           
        }
       
     }

        </script>
    </head>
    <body onkeydown="suggestPress()"  >
        <form id="form1" runat="server">
     
        <input name="txt_key" id="txt_key" type="text"  onkeyup="change_key()"    enableviewstate="false"     />
        <div id="search_suggest" ></div>
       
        </form>
         
       
    </body>

     

     

    后台代码如下:

    <%@ WebHandler Language="C#" Class="search" %>

    using System;
    using System.Web;
    using System.Data.SqlClient;
    using System.Data;
    using Model;
    using SqlDAL;
    using System.Text;


    public class search : IHttpHandler
    {
       
        public void ProcessRequest (HttpContext context)
        {
           
           
            context.Response.ContentType = "text/plain";
           
            if (context.Request.QueryString["key"] != null)
            {

               
                string key = context.Request.QueryString["key"].ToString();
                if (key.Trim() != "")
                {
                    StringBuilder builder = new StringBuilder();
                    int con = KeyWord.GetList(key.Trim()).Tables[0].Rows.Count;

                    if (con > 0)
                    {
                        int s=0;
                        for (int i = 0; i < con; i++)
                        {
                            s++;
                            builder.Append(KeyWord.GetList(key.Trim()).Tables[0].Rows[i]["keyword"].ToString() + (s == con ? "" : "|"));
                        }
                    }

                    context.Response.Write(builder.ToString());
                    context.Response.End();

                }

            }
     
        }
     
        public bool IsReusable
        {
            get
            {
                return false;
            }

     

    运行效果如图:

    当我键盘移动方向键的时,只能显示一项了,不像google suggest那样可以选择,随后我断点跟踪了下,发现又再次执行后台方法才导致的,所以我想问问高手我应该如何来解决这个问题,谢谢了


    煜诚海参专卖 淘宝店铺:http://jinweb.taobao.com
    • 已移动 Paul Zhou 2011年5月31日 4:49 (发件人:.NET Framework 一般性问题讨论区)
    2011年5月30日 5:22

答案

  • 你好,

    可能是在按下方向键向下的时候,如果一直按着不放,就不会触发onkeyup的事件。如果找到了所要的单词就会释放方向键,这时候,onkeyup的事件就触发了。

    你好,问题已经找到了,是由于每次按键的时候都会执行change_key方法,毕竟onkeyup是键盘点击执行的,所以我在change_key方法中加了判断,判断event.keyCode如果不是38或40的时候才执行,这样就有效避免了由于按方向键而导致的ajax执行。 感谢你的关注,谢谢!

    煜诚海参专卖 淘宝店铺:http://jinweb.taobao.com
    • 已标记为答案 jinwb1982 2011年6月3日 0:10
    2011年6月3日 0:10

全部回复

  • 你好,

    可能是在按下方向键向下的时候,如果一直按着不放,就不会触发onkeyup的事件。如果找到了所要的单词就会释放方向键,这时候,onkeyup的事件就触发了。

    2011年6月2日 7:00
    版主
  • 你好,

    可能是在按下方向键向下的时候,如果一直按着不放,就不会触发onkeyup的事件。如果找到了所要的单词就会释放方向键,这时候,onkeyup的事件就触发了。

    你好,问题已经找到了,是由于每次按键的时候都会执行change_key方法,毕竟onkeyup是键盘点击执行的,所以我在change_key方法中加了判断,判断event.keyCode如果不是38或40的时候才执行,这样就有效避免了由于按方向键而导致的ajax执行。 感谢你的关注,谢谢!

    煜诚海参专卖 淘宝店铺:http://jinweb.taobao.com
    • 已标记为答案 jinwb1982 2011年6月3日 0:10
    2011年6月3日 0:10