您现在的位置: 365建站网 > 365学习 > mootools实现搜索提示文本框 (转)

mootools实现搜索提示文本框 (转)

文章来源:365jz.com     点击数:276    更新时间:2009-09-12 15:02   参与评论

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

 

<!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 id="Head1" runat="server">

    <title>无标题页</title>

    <link href="AjaxText.CSS" rel="stylesheet" type="text/css" />

 

    <script type="text/JavaScript" src="mootools-release-1.11.js"></script>

 

    <script type="text/javascript">

       

        function getMsg(obj){

            $("ajaxtextbox").value=obj.innerHTML;

            $("msgdiv").innerHTML="";

            $("msgdiv").className="display1";

        }

        window.addEvent('domready',function(){

                $('ajaxtextbox').addEvent('keyup',function(e){

 

                    if($('ajaxtextbox').value==''){

                        return;

                    }

                    var url="NewAjaxTextBox.aspx?value="+ escape($('ajaxtextbox').value);

                    new Ajax(url,{method:'post',

                        onComplete:function(){

                            $("msgdiv").innerHTML=this.response.text;

                            if(this.response.text!=''){

                                $("msgdiv").className="display2";

                            }

                        }

                    }).request();

            });

        });

 

    </script>

 

</head>

<body>

    <input type="text" id="ajaxtextbox" class="text" runat="server" /><br />

    <div id="msgdiv" class="display1" >

    </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;

using System.Text;

 

public partial class NewAjaxTextBox : System.Web.UI.Page

{

    public static DataTable dt = new DataTable();

    protected void Page_Load(object sender, EventArgs e)

    {

        if (dt.Rows.Count < 1)

        {

            dt.Columns.Add("content");

            for (int i = 0; i < 3; i++)

            {

                DataRow dr = dt.NewRow();

                dr["content"] = "呵呵" + i.ToString();

                dt.Rows.Add(dr);

            }

            for (int i = 0; i < 3; i++)

            {

                DataRow dr = dt.NewRow();

                dr["content"] = "哈哈" + i.ToString();

                dt.Rows.Add(dr);

            }

        }

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

        {

            Seach(Request["value"]);

 

        }

    }

    protected void Seach(string value)

    {

        StringBuilder sb = new StringBuilder();

        for (int i = 0; i < dt.Rows.Count; i++)

        {

            string content = dt.Rows[i]["content"].ToString();
            if (content.IndexOf(value.Trim())>0||content.StartsWith(value.Trim())||content.EndsWith(value.Trim()))

            {

                string id = "dv" + i.ToString();

                sb.AppendFormat("<div id=""{0}"" style=""width:170px; cursor:pointer;""  ><a href=""javascript:void(null);"" onclick=""getMsg(this)"" >{1}</a></div>", id, dt.Rows[i]["content"].ToString());

            }

        }

        Response.Clear();

        Response.Write(sb);

        Response.End();

    }

}

AjaxText.css

.text{ width:200px; font-size:12px; left:0px;}

.display1{ width:200px; left:1px;}

.display2{ width:200px; border: solid 1px blackleft:1px;}

a:link

{

     color: #000000;

     text-decoration: none;

}

a:visited

{

     color: #0000FF;

     text-decoration: none;

}

a:hover

{

     color: #FF0000;

     text-decoration: underline;

}

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (276人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------