新建一用户控件
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebAjaxTextBox.ascx.cs" Inherits="Freeborders.Phonebook.Web.UserControls.WebAjaxTextBox" %>
<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
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;
namespace Freeborders.Phonebook.Web.UserControls
{
public partial class WebAjaxTextBox : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Response.ContentEncoding = System.Text.Encoding.GetEncoding("GB2312");
}
this.Attributes.Add("autocomplete", "off");
}
private string scriptFile = "";
private string callBackFunction = "";
private string backgroundColor = "#EEE";
private string highlightColor = "#CCC";
private string font = "宋体";
private string divPadding = "2px";
private string divBorder = "1px solid #CCC";
public string ScriptFile
{
get
{
return scriptFile;
}
set
{
scriptFile = value;
}
}
public string CallBackFunction
{
get
{
return callBackFunction;
}
set
{
callBackFunction = value;
}
}
public string BackgroundColor
{
get
{
return backgroundColor;
}
set
{
backgroundColor = value;
}
}
public string HighlightColor
{
get
{
return highlightColor;
}
set
{
highlightColor = value;
}
}
public string DivFont
{
get
{
return font;
}
set
{
font = value;
}
}
public string DivPadding
{
get
{
return divPadding;
}
set
{
divPadding = value;
}
}
public string DivBorder
{
get
{
return divBorder;
}
set
{
divBorder = value;
}
}
public string Text
{
get
{
return txtSearch.Text;
}
set
{
txtSearch.Text = value;
}
}
/// <summary>
/// override OnPreRender
/// </summary>
protected override void OnPreRender(EventArgs e)
{
this.RegistedClientScript();
base.OnPreRender(e);
}
private void RegistedClientScript()
{
// 引入js文件
Page.ClientScript.RegisterStartupScript(Page.GetType(), "LoadScript", "<script language='JavaScript' src='" + ScriptFile + "'charset='gb2312'></script>");
// 设置显示样式
string styles = String.Format(
@"<script language='JavaScript' charset='gb2312'>
var DIV_BG_COLOR = '{0}';
var DIV_HIGHLIGHT_COLOR = '{1}';
var DIV_FONT = '{2}';
var DIV_PADDING = '{3}';
var DIV_BORDER = '{4}';
</script>",
BackgroundColor, HighlightColor, DivFont, DivPadding, DivBorder);
Page.ClientScript.RegisterStartupScript(Page.GetType(), "LookupStyles", styles);
// 初始化
Page.ClientScript.RegisterStartupScript(Page.GetType(),
"RegisterScript",
"<script language='JavaScript' charset='gb2312'>InitQueryCode('ctl00_PhonebookContent_WebAjaxTextBox1_txtSearch')</script>");
//this.ClientID
// 定义mainLoop函数
Page.ClientScript.RegisterStartupScript(Page.GetType(), "RegisterCallBack", @"<script language='JavaScript'>
mainLoop = function()
{
val = queryField.value;
if(lastVal != val)
{
var response = " + CallBackFunction + @"(val);
showQueryDiv(response.value); lastVal = val;
}
setTimeout('mainLoop()', 100);
return true;};
</script>");
}
protected override void Render(HtmlTextWriter writer)
{
base.Render(writer);
}
}
}
// 下拉区背景色
var DIV_BG_COLOR = "#EEE";
// 高亮显示条目颜色
var DIV_HIGHLIGHT_COLOR = "#C30";
// 字体
var DIV_FONT = "Arial";
// 下拉区内补丁大小
var DIV_PADDING = "2px";
// 下拉区边框样式
var DIV_BORDER = "1px solid #CCC";
// 文本输入框
var queryField;
// 下拉区id
var divName;
// IFrame名称
var ifName;
// 记录上次选择的值
var lastVal = "";
// 当前选择的值
var val = "";
// 显示结果的下拉区
var globalDiv;
// 下拉区是否设置格式的标记
var divFormatted = false;
/**
InitQueryCode函数必须在<body onload>事件的响应函数中调用,其中:
queryFieldName为文本框控件的id,
hiddenDivName为显示下拉区div的id
*/
function InitQueryCode (queryFieldName, hiddenDivName)
{
// 指定文本输入框的onblur和onkeydown响应函数
queryField = document.getElementById(queryFieldName);
//queryField.onblur = hideDiv;
queryField.onkeydown = keypressHandler;
//queryField.onmouseout = hideDiv;
// 设置queryField的autocomplete属性为"off"
queryField.autocomplete = "off";
// 如果没有指定hiddenDivName,取默认值"querydiv"
if (hiddenDivName)
{
divName = hiddenDivName;
//window.alert(divName);
}
else
{
divName = "querydiv";
}
// IFrame的name
ifName = "queryiframe";
// 100ms后调用mainLoop函数
setTimeout("mainLoop()", 100);
}
/**
获取下拉区的div,如果没有则创建之
*/
function getDiv (divID)
{
if (!globalDiv)
{
// 如果div在页面中不存在,创建一个新的div
if (!document.getElementById(divID))
{
var newNode = document.createElement("div");
newNode.setAttribute("id", divID);
newNode.style.overflowY = "scroll";
newNode.style.height = "150px";
newNode.style.zIndex = 10000;
document.body.appendChild(newNode);
}
// globalDiv设置为div的引用
globalDiv = document.getElementById(divID);
// 计算div左上角的位置
var x = queryField.offsetLeft;
var y = queryField.offsetTop + queryField.offsetHeight;
var parent = queryField;
while (parent.offsetParent)
{
parent = parent.offsetParent;
x += parent.offsetLeft;
y += parent.offsetTop;
}
// 如果没有对div设置格式,则为其设置相应的显示样式
if (!divFormatted)
{
globalDiv.style.backgroundColor = DIV_BG_COLOR;
globalDiv.style.fontFamily = DIV_FONT;
globalDiv.style.padding = DIV_PADDING;
globalDiv.style.border = DIV_BORDER;
globalDiv.style.width = "150px";
globalDiv.style.fontSize = "90%";
globalDiv.style.position = "absolute";
globalDiv.style.left = x + "px";
globalDiv.style.top = y + "px";
globalDiv.style.visibility = "hidden";
globalDiv.style.zIndex = 10000;
divFormatted = true;
}
}
return globalDiv;
}
/**
根据返回的结果集显示下拉区
*/
function showQueryDiv(resultArray)
{
// 获取div的引用
var div = getDiv(divName);
// 如果div中有内容,则删除之
if(div != null)
{
while (div.childNodes.length > 0)
div.removeChild(div.childNodes[0]);
}
if(resultArray != null)
{
// 依次添加结果
for (var i = 0; i < resultArray.length; i++)
{
// 每一个结果也是一个div
var result = document.createElement("div");
// 设置结果div的显示样式
result.style.cursor = "pointer";
result.style.padding = "2px 0px 2px 0px";
// 设置为未选中
_unhighlightResult(result);
// 设置鼠标移进、移出等事件响应函数onmousedown
//document.ondblclick
result.onmousedown = selectResult;
result.onmouseover = highlightResult;
result.onmouseout = unhighlightResult;
// 结果的文本是一个span
var result1 = document.createElement("span");
// 设置文本span的显示样式
result1.className = "result1";
result1.style.textAlign = "left";
result1.style.fontWeight = "bold";
result1.innerHTML = resultArray[i];
// 将span添加为结果div的子节点
result.appendChild(result1);
// 将结果div添加为下拉区的子节点
div.appendChild(result);
}
// 如果结果集不为空,则显示,否则不显示
showDiv(resultArray.length > 0);
}
}
/**
用户点击某个结果时,将文本框的内容替换为结果的文本,
并隐藏下拉区
*/
function selectResult()
{
_selectResult(this);
}
// 选择一个条目
function _selectResult(item)
{
//alert('test');
var spans = item.getElementsByTagName("span");
if (spans)
{
for (var i = 0; i < spans.length; i++)
{
if (spans[i].className == "result1")
{
queryField.value = spans[i].innerHTML;
lastVal = val = escape(queryField.value);
/**window.alert(escape('A**&*&*&%$#@BBB'));*/
mainLoop();
queryField.focus();
showDiv(false);
return;
}
}
}
}
/**
当鼠标移到某个条目之上时,高亮显示该条目
*/
function highlightResult()
{
_highlightResult(this);
}
function _highlightResult(item)
{
item.style.backgroundColor = DIV_HIGHLIGHT_COLOR;
}
/**
当鼠标移出某个条目时,正常显示该条目
*/
function unhighlightResult()
{
_unhighlightResult(this);
}
function _unhighlightResult(item)
{
item.style.backgroundColor = DIV_BG_COLOR;
}
/**
显示/不显示下拉区
*/
function showDiv (show)
{
var div = getDiv(divName);
if (show)
{
div.style.visibility = "visible";
}
else
{
div.style.visibility = "hidden";
}
//adjustiFrame();
}
/**
隐藏下拉区
*/
function hideDiv ()
{
showDiv(false);
}
/**
调整IFrame的位置,这是为了解决div可能会显示在输入框后面的问题
*/
function adjustiFrame()
{
// 如果没有IFrame,则创建之
if (!document.getElementById(ifName))
{
var newNode = document.createElement("iFrame");
newNode.setAttribute("id", ifName);
newNode.setAttribute("src", "javascript:false;");
newNode.setAttribute("scrolling", "no");
newNode.setAttribute("frameborder", "0");
document.body.appendChild(newNode);
}
iFrameDiv = document.getElementById(ifName);
var div = getDiv(divName);
// 调整IFrame的位置与div重合,并在div的下一层
try
{
iFrameDiv.style.position = "absolute";
iFrameDiv.style.width = div.offsetWidth;
iFrameDiv.style.height = div.offsetHeight;
iFrameDiv.style.top = div.style.top;
iFrameDiv.style.left = div.style.left;
iFrameDiv.style.zIndex = div.style.zIndex - 1;
iFrameDiv.style.visibility = div.style.visibility;
}
catch (e)
{
}
}
/**
文本输入框的onkeydown响应函数
*/
function keypressHandler (evt)
{
// 获取对下拉区的引用
var div = getDiv(divName);
// 如果下拉区不显示,则什么也不做
if (div.style.visibility == "hidden")
{
return true;
}
// 确保evt是一个有效的事件
if (!evt && window.event)
{
evt = window.event;
}
var key = evt.keyCode;
var KEYUP = 38;
var KEYDOWN = 40;
var KEYENTER = 13;
var KEYTAB = 9;
// 只处理上下键、回车键和Tab键的响应
if ((key != KEYUP) && (key != KEYDOWN) && (key != KEYENTER) && (key != KEYTAB))
{
return true;
}
var selNum = getSelectedSpanNum(div);
var selSpan = setSelectedSpan(div, selNum);
// 如果键入回车和Tab,则选择当前选择条目
if ((key == KEYENTER) || (key == KEYTAB))
{
if (selSpan)
{
_selectResult(selSpan);
}
evt.cancelBubble = true;
return false;
}
else //如果键入上下键,则上下移动选中条目
{
if (key == KEYUP)
{
selSpan = setSelectedSpan(div, selNum - 1);
div.scrollTop=(selNum-1)*12;
}
if (key == KEYDOWN)
{
selSpan = setSelectedSpan(div, selNum + 1);
div.scrollTop=(selNum+1)*12;
}
if (selSpan)
{
_highlightResult(selSpan);
}
}
// 显示下拉区
showDiv(true);
return true;
}
/**
获取当前选中的条目的序号
*/
function getSelectedSpanNum(div)
{
var count = -1;
var spans = div.getElementsByTagName("div");
if (spans)
{
for (var i = 0; i < spans.length; i++)
{
count++;
if (spans[i].style.backgroundColor != div.style.backgroundColor)
{
return count;
}
}
}
return -1;
}
/**
选择指定序号的结果条目
*/
function setSelectedSpan(div, spanNum)
{
var count = -1;
var thisSpan;
var spans = div.getElementsByTagName("div");
if (spans)
{
for (var i = 0; i < spans.length; i++)
{
if (++count == spanNum)
{
_highlightResult(spans[i]);
thisSpan = spans[i];
}
else
{
_unhighlightResult(spans[i]);
}
}
}
return thisSpan;
}
在调用此用户控件的后台代码中加入方法:
[AjaxMethod()]
public ArrayList GetSearchItems(string query)
{
ArrayList items = new ArrayList();
_PhoneSearchLogic = new PhoneSearchLogic();
query = Server.HtmlDecode(query);
items = _PhoneSearchLogic.GetSearchItems(query);
return items;
}
前台的代码是 :
<table cellpadding="0" cellspacing="8" border="0" style="vertical-align:top;width:100%">
<tr valign ="middle">
<td style="width: 27%;"></td>
<td style="width: 32%;">
<uc1:WebAjaxTextBox ID="WebAjaxTextBox1" Runat="Server" BackgroundColor="#EEE" DivBorder="1px solid #CCC" DivPadding="2px" DivFont="Arial" HighlightColor="#C30" CallBackFunction="Freeborders.Phonebook.Web.Search.PhoneBookSearch.GetSearchItems" ScriptFile="..\JavaScript\lookup.js" />
</td>
<td align="center" style="width: 6%;">
</td>
<td align="center" style="width: 35%;">
<asp:Button ID="btnQuickSearch" runat="server" Text="查询" OnClick="btnQuickSearch_Click" Width="70px" CssClass="btnClass" /></td>
</tr>
</table>
就这样OK啦..呵,呵.....
浙公网安备 33010602011771号