Asp.net中创建Auto Complete Text Box 概述

如果不知道什么是auto complete text box，你可以查看google suggest,或者在hotmail live中输入收件人的那个提示.

今天看了一下RichXin的blog,仿照他做了一个类似于hotmail,或者yahoo的Auto complete 邮件地址的TextBox,

其实很简单就是在TextBox的keydown的事件中，用_div = document.createElement("DIV"),然这个_div放置在Textbox的正下方，这个_Div也就像是一个Panel来装载查询后的数据。

function showPanel() <---这个事件就是keydown事件
{
 xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
} 
var url="GetUserEmail.aspx"
url=url+"?keyword="+ 那个TExtBox的Text
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

在我的UserEmail.aspx页面中

SQL Query 

SELECT TOP 10 FirstName+' '+ LastName AS　FullName, PrimaryEmail from UserTable 

WHERE FirstName = @Keyword OR LastName = @Keyword OR PrimaryEmail=@keyword

取到数值以后，把它放到javascript中的Array,然后在

string fullName ="";

string Email = "";

while(datareader.read())

{ 

  fullName += "'" + dr["FullName"] + "',";

  Email += "'" + dr["PrimaryEmail"] +"',";

} 

然后Response.Write("callBack1(new Array(" + fullName +"), new Array(" + Email +"));");

这个也就是以后的xmlHttp.responseText 

然后eval(xmlHttp.responseText)

在callBack1(a,b)这个function中，还记得我们的那个_div吗？

首先，我们要确保这个_div中没有任何的childElement,所以我们首先要清除所有的childElement

因为我们默认a,b这两个Array的数值应该是相对应的，所以我们for(var i=0; i < a.length; i++)

在这里我们创建_div这个DIV的子DIV,也就是a[i] b[i]放在一行里，我们可以继续用div,或者我们可以用table,

然后再每行里创建onMouseOver,onMouseClick事件，让他把选中的数据填写到那个Textbox中。

当点中一个行时，就把b[i]写进到TextBox中。

这就是总体的Auto Complete Box。