zoukankan      html  css  js  c++  java
  • mootools实现搜索提示文本框修正版

    以前做了个提示文本框的示例,里面有很多不必要的东西,现在我修改了下,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=\"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;

    }

    运行效果:


  • 相关阅读:
    sublime插件FileHeader使用,自动的添加模板
    基于aspectj实现AOP操作的两种方式——xml配置
    AOP操作术语
    AOP原理
    maven的常用构建命令
    maven目录结构
    maven环境变量配置
    接口式编程
    mybatis编写流程(老版本的方式,新版本用接口式编程)
    当数据库中的字段与javabean中对应的属性名不同
  • 原文地址:https://www.cnblogs.com/mimengjiangnan/p/986447.html
Copyright © 2011-2022 走看看