mootools实现搜索提示文本框 (转)
<%@ 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;
}
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
您可能感兴趣的文章:
- 上一篇：AJAX应用的五个步骤
- 下一篇：国内主流报表软件工具比
