自定义用户控件,实在数据动态提示
新建一用戶控件
<%@ 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啦..呵,呵.....
轉載于:https://www.cnblogs.com/tangchangyong/archive/2008/04/03/1136635.html
總結
以上是生活随笔為你收集整理的自定义用户控件,实在数据动态提示的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： （转）国外软件外包项目网站（适用软件兼职
- 下一篇： IE缓存路径的更改