.NET+Ajax 实现站内搜索

 

最近这几天开始研究Ajax ,发现它的功能很强大,所以自己就做了个练习,主要功能是实现仿 google的站点内搜索数据库中内容, 本人也是javascript 的初学者,所以代码还有很多BUG 希望各位高手能够给与指点，如果觉得还有点用的话就给加点分哈,另外,想说的就是本人极力支持开源希望能和有识之士共同交流,下面就是我的全部代码,在脚本部分我加了很多注释(因为代码比较长),所以还请大家耐心的看啊。。

代码部分:一。CSS部分 

 

< style >
.spancss { BACKGROUND - COLOR: #d3d3d3 }
.search_suggest { BORDER - RIGHT: #a9a9a9 1px solid; PADDING - RIGHT: 0px; BORDER - TOP: 0px solid; PADDING - LEFT: 0px; FONT - SIZE: x - small; PADDING - BOTTOM: 0px; MARGIN: 0px; BORDER - LEFT: #a9a9a9 1px solid; WIDTH: 155px; PADDING - TOP: 0px; BORDER - BOTTOM: #a9a9a9 1px solid; FONT - FAMILY: 宋体; POSITION: absolute; HEIGHT: 50px; BACKGROUND - COLOR: white }
.suggest_hidden { DISPLAY: none }
</ style >

二。Script脚本部分

 

< script >
            
             var  xmlhttprequest;
                 function  getmessage(handler)    // 创建 xmlhttp对象
                {
                     var  xmlhttp;
                     try {
                    
                    xmlhttp  =   new  XMLHTTPRequest();
                
                    xmlhttp.onload  =  handler;
                    xmlhttp.onerror = handler;
                    
                     return  xmlhttp;
                    }
                     catch (e)
                    {
                         try {
                        
                             xmlhttp  =   new  ActiveXObject( " Microsoft.XMLHTTP " );
                    
                             xmlhttp.onreadystatechange = handler;    
                              return  xmlhttp;    
                            }
                             catch (e)
                            {
                                alert( " not open object " + e.message);
                                 return   false ;
                            }
                    }
                }
                     var  code = "" ;   // 文本框中的全部字符串
                     var  str;       // 截取输入前的字符串
                     var  len;       // 获取输入的字符串
                     var  downcount  = 0 ;  // 记录向下键点击次数
                     var  upcount  =   0 ;   // 记录向上键点击次数
                     var  ctrlcount  =   0 ;  // 记录Ctrl键 点击次数
                     var  zhcount  =   0 ;     // 统计中文切换后 敲击的空格
                    
                 function  keyup()      // 键盘弹起事件时执行的方法，能够处理 英文，中文
                {
                    
                     var  s =/^[/u4e00-/u9fa5]+$/ ;    // 创建 中文过滤器
                    
                    str = event.srcElement.value.substring( 0 ,code.length);    
                    len  =  event.srcElement.value.substring(str.length);      // 通过截取获得刚输入的字符
                    
                    
                     if (event.keyCode >= 65 && event.keyCode <= 122 )             // 判断输入的是否是字母
                    {
                        code  =  code + String.fromCharCode(event.keyCode);      // 将字    ASCII码转换成字符
                    
                    sendpress(code);                                     // 向服务器发送 并处理返回结果
                    
                    }    
                
                     else   if (len.match(s))         // 获取中文字符
                    {
                    
                     var  value = len.replace( /[^/u4E00-/u9FA5]/g );             // 将输入的字符转换成汉字
                    code = code + value;
                    zhcount ++ ;                             // 切换输入法后输入空格的个数
                    sendpress(code);  //  向服务器发送数据并返回结果
                    
                    
                
                }
                
                 if (event.keyCode == 17 )         // 触发ctrl事件
                    {
                        ctrlcount = 1 ;         // 设置CTRL的默认值                    
                         return ;
                    }        
                     if (event.keyCode == 8 )     // 触发回退事件
                    {
                        backpress(code);
                        
                         return ;
                    }
                     if (event.keyCode == 32 )   // 触发 空格 事件
                    {
                        spacepress(code);
                        
                         return ;
                    }
                     if (event.keyCode == 38 )   // 触发 向上键事件
                    {
                        uppress(downcount);
                         return ;
                    }        
                     if (event.keyCode == 40 )  // 触发 向下键事件
                    {
                        downpress(downcount);
                         return ;
                    
                    }
                    

                    
                }
                 function  divonblur()                 // 触发此事件,使DIV失去焦点
                {
            
                     var  onblur_event = event.srcElement;         // 获得触发此事件的DIV
                     var  onblur_parent = onblur_event.parentElement.parentElement;     // 获得其父级DIV
                     if (onblur_parent.tagName == " TR " )                                 // 筛选出父级DIV
                    onblur_event.attributes[ " class " ].value = " suggest_hidden " ;     // 隐藏
                     else
                     return ;

                }    
                
                 function  mouseover()         // SPAN中悬停事件
                {
                     var  mouse_event = event.srcElement;         // 获取触发事件的 SPAN
                     var  mouse_parent = mouse_event.parentElement;     // 获取其父级DIV
                    mouse_parent.attributes[ " class " ].value = " spancss " ;     // 为其父级DIV添加背景CSS
                    document.getElementById( " seach " ).innerText = mouse_event.innerText;  // 为文本框赋值
                    mouse_parent.parentElement.focus();             // 获得焦点
                     return ;
                
                }    
                 function  mouseout()  // SPAN中移开事件
                {
                     var  mouse_event = event.srcElement;             // 触发此事件的DIV
                     var  mouse_parent = mouse_event.parentElement;     // 获得其父级DIV
                    mouse_parent.attributes[ " class " ].value = "" ;     // 重置背景
                     return ;
                }
                
                
                
                 function  uppress(upcode)     // 向上 键盘 事件
                {
                downcount -- ;                 // 上移
                 var  search  = document.getElementById( " seachlist " );     // 获得容器 DIV
                 var  textvalue = document.getElementById( " seach " );         //
                 for ( var  j = search.children.length - 1 ;j >= 0 ;j -- )
                    { 
                     if (downcount ==- 1 )                 // 如果超出列表范围 从下方进入
                        
                        {    downcount = search.children.length - 1 ;    // 重新初始化 downcount
                            search.children[ 0 ].attributes[ " class " ].value = "" ;   // 取消第一行DIV的背景色
                            
                        }
                     else
                        search.children[j].attributes[ " class " ].value = "" ;     // 重置CSS
                     if (downcount == j)
                    {    
                        search.children[j].attributes[ " class " ].value = " spancss " ;  // 设置DIV背景色
                        textvalue.innerText = search.children[j].children[ 0 ].innerText;  // 为文本框赋值
                      return ;
                    }
                    
                     }
                        
                
                }
                 function  downpress(downcode)   // 按向下箭头触发的事件
                {
                     var  search  = document.getElementById( " seachlist " );     // 获得容器DIV
                    
                     for ( var  num = 0 ;num < search.children.length;num ++ )         // 遍历容器DIV
                    {
                        
                         if (downcode == num)                                 // 判断当前位置
                        {                                                
                         downcount ++ ;                                     // 下移
                         search.children[num].attributes[ " class " ].value = " spancss " ;     // 设置背景色
                    
                          if (num == search.children.length - 1 )                 // 判断是否到达底部 如到达底部对其进行截取空格
                         {
                            document.getElementById( " seach " ).innerText = search.children[num].children[ 0 ].innerText.substring( 0 ,search.children[num].children[ 0 ].innerText.length - 1 );
                            
                            
                             return ; 
                        }
                         else
                        {
                            document.getElementById( " seach " ).innerText = search.children[num].children[ 0 ].innerText;
                          return ;
                        }
                        }
                         else
                        {                                                    
                            search.children[num].attributes[ " class " ].value = "" ;     // 重置当前背景色
                        }
                            
                        
                    }
                    downcount  =   0 ;                             // 位置指针指向容器 DIV的首行
                }
                
                 function  spacepress(spacecode)     // 按下空格时code 长度增加
                {     if (zhcount == 0 )            
                    {
                         if (ctrlcount == 0 )             // 判断输入法是否按 CTRl键
                        {                            
                        code = spacecode + "   " ;         // 当在文本框中输入空格时 总值迎加上空格值        
                        sendpress(code);            
                            
                        }
                         else
                        {    
                    
                            ctrlcount = 0 ;         // 恢复默认
                        }
                    }
                     else                              // 如果切换输入法后输入
                    {
                        sendpress(spacecode);        
                        zhcount = 0 ;                
                        
                    }
                }
            
                
                 function  backpress(backcode)    // 按回退键时 发生的事件
                {
                         var  strcode  =  backcode.substring(backcode.substring( 0 ,backcode.length - 2 ).length);
                         // 截取最后两位
                         if (strcode.match( /^[/u4e00-/u9fa5]+$/ ))  // 判断截取后是否是中文
                            code =  code.substring( 0 ,code.length - 2 );
                         else   if (strcode.match( /^ [A - Za - z] + $ / ))
                            code  =  code.substring( 0 ,code.length - 1 ); // 如不是则截取一位
                         else
                            code  =  code.substring( 0 ,code.length - 1 );     // 其他情况也截取一位
                    
                     if (code)    
                    {
                    sendpress(code);     // 向服务器提交数据
                    
                    }
        
                }
                
                 function  divcss()    //  空数据时层的显示和隐藏
                {
                         // 判断SPAN中的内容
                     if (document.getElementById( " seachlist " ).children[ 0 ].children[ 0 ].innerHTML != "" )
                        {
                            document.getElementById( " seachlist " ).attributes[ " class " ].value = " search_suggest " ;
                            
                        }
                     else
                        
                        {
                            document.getElementById( " seachlist " ).attributes[ " class " ].value = " suggest_hidden " ;
                             // 隐藏父级DIV
                             return ;
                        }
                }    
                
                
                 function  sendpress(sendcode)     // 向服务器发送 并接收 数据
                {
                
                     var  url = " WebForm8.aspx?param=1 " ;    
                    xmlhttprequest = getmessage(showlist);     // 实例化 XMLHTTP 对象
                    
                    xmlhttprequest.open( " GET " ,url, true );     // 打开连接
                    xmlhttprequest.send(sendcode);             // 向服务器发送数据
                
                }
                
                 function  showlist()    // onreadystatechange  事件执行的方法
                {
                  
                     if (xmlhttprequest.readyState == 4 || xmlhttprequest.readyState == " complete " )
                    {
                        // 判断状态
                      
                        document.getElementById( " seachlist " ).innerHTML = "" ;     // 向容器DIV添加元素
                         var  httptext  =  xmlhttprequest.responseText;             // 获取服务器返回字符串
                         var  strtext  =  httptext.substring( 0 ,httptext.indexOf( ' < ' )); // 获取服务器发送过来的文本
                                                    
                         var  arry  =   new  Array();
                        arry  =  strtext.split( ' , ' );
                         for ( var  i = 0 ;i < arry.length;i ++ )                         // 对其进行遍历
                        {
                             var  div  =  document.createElement( " DIV " );         // 创建子DIV
                            div.id  =  i;                                         // 设定ID
                            div.onblur =  divonblur;                             // 添加失去焦点事件
                            div.innerHTML = " <SPAN οnmοuseοver='mouseover();' οnmοuseοut='mouseout();'> " + arry[i] + " </SPAN></br> " ;
                             // 创建SPAN添加到子容器DIV中
                            document.getElementById( " seachlist " ).appendChild(div);
                             // 将子容器挂载到父容器中
                        }
                        divcss();         // 判断是否隐藏
                    }
                }
         </ script >

三。HTML表单部分

 

< body  MS_POSITIONING ="GridLayout" >
< form  id ="Form1"  method ="post"  runat ="server" >
< table  width ="100%" >
< tr  height ="5%" >
< td  style ="HEIGHT: 5%" >
< asp:textbox  id ="seach"  runat ="server"  autocomplete ="off"  CssClass ="txt" ></ asp:textbox >
< input  id ="btn_seach"  type ="button"  value ="快速搜索" >< br >
< div  id ="seachlist"  onblur ="divonblur()"   ></ div >
</ td >
</ tr >
</ table >
</ form >
</ body >

 

 四。服务器端代码

private     SqlConnection con;
private     DataTable tab;
private     SqlDataAdapter sa;

private   void  Page_Load( object  sender, System.EventArgs e)
         ... {
            
            this.seach.Attributes.Add("onkeyup","keyup()");
            if(Request.QueryString["param"]!=null)
            ...{    
                BinaryReader br = new BinaryReader(Request.InputStream);
                byte [] b = new byte[Request.InputStream.Length];
                br.Read(b,0,b.Length);
                char []c = Encoding.UTF8.GetChars(b);
                        string str = new string(c);
                string strparam = getmessage(str);
                if(strparam!="")
                Response.Write(strparam);
            }
            // 在此处放置用户代码以初始化页面
            
        
        }

         private   string  getmessage( string  message)
         ... {
            string str ="";
            if(con==null)
            con = new SqlConnection("Server=(local);Database=pubs;uid=;pwd=");
            sa = new SqlDataAdapter("select message from messages where message 
            like '"+message+"%'",con);
            dt = new DataSet();
            sa.Fill(dt,"message");
            tab = dt.Tables[0];
            for(int i=0;i<tab.Rows.Count;i++)
            ...{
                if(i==tab.Rows.Count-1)
                    str+=tab.Rows[i][0].ToString();
                else
                str+=tab.Rows[i][0].ToString()+",";
            
            
            }
            return str;
        }

就是以上这些了 希望能对大家有所帮助  另外请高手帮我修改存在的BUG 并通知我

QQ:22097845     Email:guozhenyu_1234@163.com