First step: Create a new page name is AutoComplete.
http://schemas.microsoft.com/intellisense/ie5">
基于AJAX的自动完成功能
--------------------------------------------------------------------------------
请输入员工姓名：
BackColor="White" CellPadding="4" GridLines="Vertical" BorderWidth="1px">
员工编号：
姓名：
入司时间：
职位：
AutoComplete.aspx.vb
Imports System
Imports System.Collections
Imports System.ComponentModel
Imports System.Data
Imports System.Drawing
Imports System.Web
Imports System.Web.SessionState
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.HtmlControls
Imports System.Data.SqlClient
Imports AjaxPro
Namespace VB_AJAXTEST
Public Class AutoComplete
Inherits System.Web.UI.Page
Protected tbSearch As System.Web.UI.WebControls.TextBox
Protected Label2 As System.Web.UI.WebControls.Label
Protected btnSearch As System.Web.UI.WebControls.Button
Protected dlEmployee As System.Web.UI.WebControls.DataList
Protected search As System.Web.UI.HtmlControls.HtmlInputText
Protected lblMessage As System.Web.UI.WebControls.Label
Protected Label1 As System.Web.UI.WebControls.Label
Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Utility.RegisterTypeForAjax(GetType(AutoComplete))
End Sub
_
Public Function GetSearchItems(ByVal query As String) As ArrayList
Dim items As ArrayList = New ArrayList
Dim myConnectionString As String = "SERVER=192.168.0.244;DATABASE=pubs;uid=sa;pwd=;Connect Timeout=30"
Dim mySelectQuery As String = String.Format("select fname from employee where fname like ''{0}%''", query)
Dim myConnection As SqlConnection = New SqlConnection(myConnectionString)
Dim myCommand As SqlCommand = New SqlCommand(mySelectQuery, myConnection)
myConnection.Open()
Dim myReader As SqlDataReader = myCommand.ExecuteReader(CommandBehavior.CloseConnection)
While myReader.Read
items.Add(myReader.GetString(0))
End While
myReader.Close()
Return items
End Function
Protected Overloads Overrides Sub OnInit(ByVal e As EventArgs)
InitializeComponent()
MyBase.OnInit(e)
End Sub
Private Sub InitializeComponent()
AddHandler Me.btnSearch.Click, AddressOf Me.btnSearch_Click
AddHandler Me.Load, AddressOf Me.Page_Load
End Sub
Private Sub btnSearch_Click(ByVal sender As Object, ByVal e As System.EventArgs)
BindList()
End Sub
Private Sub BindList()
Dim myConnectionString As String = "SERVER=192.168.0.244;DATABASE=pubs;uid=sa;pwd=;Connect Timeout=30"
Dim mySelectQuery As String = String.Format("select a.*,b.job_desc from employee a, jobs b where fname like ''{0}%'' and a.job_id=b.job_id", search.Value)
Dim myConnection As SqlConnection = New SqlConnection(myConnectionString)
Dim myCommand As SqlCommand = New SqlCommand(mySelectQuery, myConnection)
Dim da As SqlDataAdapter = New SqlDataAdapter(myCommand)
Dim ds As DataSet = New DataSet
Try
myConnection.Open()
da.Fill(ds)
dlEmployee.DataSource = ds.Tables(0).DefaultView
dlEmployee.DataBind()
Catch ex As SqlException
Response.Write(ex.Message)
Finally
myConnection.Close()
End Try
If ds.Tables(0).Rows.Count = 0 Then
lblMessage.Text = "没有您要查找的员工信息！"
Else
lblMessage.Text = ""
End If
End Sub
End Class
End Namespace
Second Step: Create a AjaxTextBox.vb.
Imports System
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.TextBox
Public Class AjaxTextBox
Inherits System.Web.UI.WebControls.TextBox
#Region "Private Property"
Private scriptFile_value As String = ""
Private callBackFunction_value As String = ""
Private backgroundColor_value As String = "#EEE"
Private highlightColor_value As String = "#CCC"
Private font_value As String = "Verdana"
Private divPadding_value As String = "2px"
Private divBorder_value As String = "1px solid #CCC"
#End Region
#Region "Public Property"
Public Property ScriptFile() As String
Get
Return scriptFile_value
End Get
Set(ByVal Value As String)
scriptFile_value = Value
End Set
End Property
Public Property CallBackFunction() As String
Get
Return callBackFunction_value
End Get
Set(ByVal Value As String)
callBackFunction_value = Value
End Set
End Property
Public Property BackgroundColor() As String
Get
Return backgroundColor_value
End Get
Set(ByVal Value As String)
backgroundColor_value = Value
End Set
End Property
Public Property HighlightColor() As String
Get
Return highlightColor_value
End Get
Set(ByVal Value As String)
highlightColor_value = Value
End Set
End Property
Public Property DivFont() As String
Get
Return font_value
End Get
Set(ByVal Value As String)
font_value = Value
End Set
End Property
Public Property DivPadding() As String
Get
Return divPadding_value
End Get
Set(ByVal Value As String)
divPadding_value = Value
End Set
End Property
Public Property DivBorder() As String
Get
Return divBorder_value
End Get
Set(ByVal Value As String)
divPadding_value = Value
End Set
End Property
#End Region
#Region "Public AjaxTextBox"
Public Sub New()
Me.Attributes.Add("AutoComplete", "off")
End Sub
Protected Overloads Overrides Sub Render(ByVal writer As HtmlTextWriter)
MyBase.Render(writer)
Page.RegisterStartupScript("LoadScript", "")
Dim styles As String = String.Format("", BackgroundColor, HighlightColor, DivFont, DivPadding, DivBorder)
Page.RegisterStartupScript("LookupStyles", styles)
Page.RegisterStartupScript("RegisterScript", "")
Page.RegisterStartupScript("RegisterCallBack", "")
End Sub
#End Region
End Class
Third step: Create a lookup.js
// 下拉区背景色
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函数必须在事件的响应函数中调用,其中:
queryFieldName为文本框控件的id,
hiddenDivName为显示下拉区div的id
*/
function InitQueryCode (queryFieldName, hiddenDivName)
{
// 指定文本输入框的onblur和onkeydown响应函数
queryField = document.getElementById(queryFieldName);
queryField.onblur = hideDiv;
queryField.onkeydown = keypressHandler;
// 设置queryField的autocomplete属性为"off"
queryField.autocomplete = "off";
// 如果没有指定hiddenDivName,取默认值"querydiv"
if (hiddenDivName)
{
divName = hiddenDivName;
}
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);
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 = "100px";
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中有内容,则删除之
while (div.childNodes.length > 0)
div.removeChild(div.childNodes[0]);
// 依次添加结果
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);
// 设置鼠标移进、移出等事件响应函数
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)
{
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);
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);
}
if (key == KEYDOWN)
{
selSpan = setSelectedSpan(div, selNum + 1);
}
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;
}
Fourthly: Add httpHandlers request in web.config.
Dont'' forget download a AjaxPro.dll then add the dll to the project.
