聽一網(wǎng)友問怎么做一個(gè)像Google搜索一樣，寫入搜索關(guān)鍵字就提示相關(guān)信息。前兩天有點(diǎn)時(shí)間，就想自己去做做看，現(xiàn)在完成了提示的功能。代碼如下：
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)){//判斷是不是中文，英文，數(shù)字
                $("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();
    }
}