听一网友问怎么做一个像Google搜索一样,写入搜索关键字就提示相关信息。前两天有点时间,就想自己去做做看,现在完成了提示的功能。代码如下:
HTML代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxTextBox.aspx.cs" Inherits="AjaxTextBox" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    
<title>AjaxTextBox</title>
    
<script type="text/javascript" src="mootools-release-1.11.js" ></script>
    
<script type="text/javascript" >
    
var values;
    window.addEvent(
"domready",function(){
        
        $(
"ajaxtextbox").addEvent("keypress",function(e){
            
var keychar;
            
var keynum;
            
if(window.event) // IE
            {
                
if(window.event.keyCode==8){//判断Backspace键
                    values=values.substr(0,values.length-1);
                    $(
"ajaxtextbox").value=values;
                }

                keynum 
= window.event.keyCode;
            }

            
else if(e.which) // Netscape/Firefox/Opera
            {
                
if(e.which==8){
                    values
=values.substr(0,values.length-1);
                    $(
"ajaxtextbox").value=values;
                }

                keynum 
= e.which;
            }

            
            keychar 
= String.fromCharCode(keynum);
            
if(/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(keychar)){//判断是不是中文,英文,数字
                $("ajaxtextbox").value+=keychar;
                values
=$("ajaxtextbox").value;
            }

            
if($("ajaxtextbox").value==""){
                
return;
            }

            
var url="AjaxTextBox.aspx?value="+$("ajaxtextbox").value;
            
new Ajax(url,{method:'post',
                onComplete:
function(){
                    $(
"msg").innerHTML=this.response.text;
                    
if($("ajaxtextbox").value.length>values.length){
                        $(
"ajaxtextbox").value=values;
                    }

                }

            }
).request(); 
        }
);

    }
);
            
        
function getMsg(obj){
            $(
"ajaxtextbox").value=obj.innerHTML;
            $(
"msg").innerHTML="";
        }

    
</script>
</head>
<body>
<input type="text" id="ajaxtextbox" name="ajaxtextbox"  style="width:170px;" runat="server" />
<div id="msg" style="width:170px;"></div>
</body>
</html>

cs代码
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class AjaxTextBox : System.Web.UI.Page
{
    
public static DataTable dt = new DataTable();
    
protected void Page_Load(object sender, EventArgs e)
    
{
        
if (!IsPostBack)
        
{
            
if (dt.Rows.Count == 0)
            
{
                dt.Columns.Add(
"cotents");
                DataRow dr 
= dt.NewRow();
                dr[
0= "0a2b3c";
                DataRow dr1 
= dt.NewRow();
                dr1[
0= "0e2f3g";
                dt.Rows.Add(dr);
                dt.Rows.Add(dr1);
            }

        }

        
if (!String.IsNullOrEmpty(Request["value"]))
        
{
            Seach(Request[
"value"]);

        }

    }

    
protected void Seach(string value)
    
{
        
string seach = "<div style=\"width:170px; background-color:InfoBackground;\" ;>";
        
for (int i = 0; i < dt.Rows.Count; i++)
        
{
            
if(dt.Rows[i]["cotents"].ToString().StartsWith(value.Trim()))
            
{
                seach 
+= "<div  style=\"width:170px; cursor:pointer;\"  onclick=\"getMsg(this)\" >" + dt.Rows[i]["cotents"].ToString() + "</div>";
            }

        }

        seach 
+= "</div>";
        Response.Clear();
        Response.Write(seach);
        Response.End();
    }

}