博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

mootools实现搜索提示文本框修正版

Posted on 2007-12-07 10:57  迷梦江南  阅读(731)  评论(0编辑  收藏  举报
以前做了个提示文本框的示例,里面有很多不必要的东西,现在我修改了下,JS代码比以前简单了。

HTML

<%@ 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 black;  left:1px;}

a:link

{

     color: #000000;

     text-decoration: none;

}

a:visited

{

     color: #0000FF;

     text-decoration: none;

}

a:hover

{

     color: #FF0000;

     text-decoration: underline;

}

运行效果: