Asp.net中创建Auto Complete Text Box&n

如果不知道什么是auto complete text box你可以查看google suggest或者在hotmail live中输入收件人的那个提示今天看了一下RichXin的blog仿照他做了一个类似于hotmail或者yahoo的Auto complete 邮件地址的TextBox其实很简单就是在TextBox的keydown的事件中用_div = documentcreateElement(DIV)然这个_div放置在Textbox的正下方这个_Div也就像是一个Panel来装载查询后的数据

function showPanel() <这个事件就是keydown事件{ xmlHttp=GetXmlHttpObject()if (xmlHttp==null){alert (Browser does not support HTTP Request)return} var url=GetUserEmailaspxurl=url+?keyword=+ 那个TExtBox的TextxmlHttponreadystatechange=stateChanged xmlHttpopen(GETurltrue)xmlHttpsend(null)}

在我的UserEmailaspx页面中

SQL Query

SELECT TOP FirstName+ + LastName ASFullName PrimaryEmail from UserTable

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

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

string fullName =;

string Email = ;

while(datareaderread())

{

fullName += + dr[FullName] + ;

Email += + dr[PrimaryEmail] +;

}

然后ResponseWrite(callBack(new Array( + fullName +) new Array( + Email +)););

这个也就是以后的xmlHttpresponseText

然后eval(xmlHttpresponseText)

在callBack(ab)这个function中还记得我们的那个_div吗？

首先我们要确保这个_div中没有任何的childElement所以我们首先要清除所有的childElement因为我们默ab这两个Array的数值应该是相对应的所以我们for(var i=; i < alength; i++)在这里我们创建_div这个DIV的子DIV也就是a[i] b[i]放在一行里我们可以继续用div或者我们可以用table然后再每行里创建onMouseOveronMouseClick事件让他把选中的数据填写到那个Textbox中

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

这就是总体的Auto Complete Box