您现在的位置: 启天网 >> 技术中心 >> Java >> 正文
今天是:
mootools实现搜索提示文本框修正版            【字体:
mootools实现搜索提示文本框修正版
作者:未知    文章来源:转载    点击数:    更新时间:2007-12-18
    
  以前做了个提示文本框的示例,里面有很多不必要的东西,现在我修改了下,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;
  
  }
  
  运行效果:
  
    
文章录入:junsan    责任编辑:junsan 
  • 上一篇文章:
  • 下一篇文章:
  • 最新热点 最新推荐 相关文章
    Java中不要裸写代码
    Java多线程杂谈
    两个变量交换的三种方法
    网站登录记忆跳转jsp实现的一种方法
    策略模式及实现
    IIS+tomcat整合,并且通过域名访问网站
    Java实现按字节长度截取字符串
    Java多线程技术中所有方法的详细解析
    JAVA中的接口和抽象类(加深初学者理解)
    Java开发者需坚守的十大基本准则
     网友评论:(最新10条。只代表网友观点,与本站立场无关!)