zoukankan      html  css  js  c++  java
  • Asp.net中创建类似Google自动感应的输入文本框实例

    Asp.net中创建类似Google自动感应的输入文本框实例

    如果不知道什么是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的TextxmlHttp.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。

  • 相关阅读:
    poj 1466 Girls and Boys (最大独立集)
    hdu 3667 Transportation (拆边 ,最小费用流)
    poj 3487 The Stable Marriage Problem (稳定婚姻 GaleShapley算法 )
    ZOJ Problem Set 1239 (最小点覆盖 )
    poj 2060 Taxi Cab Scheme (最小路径覆盖)
    poj 2226 Muddy Fields (最小点覆盖)
    hdu 1281 棋盘游戏 (二分图)
    hdu 3666 THE MATRIX PROBLEM (差分约束)
    poj 1325 Machine Schedule (最小点覆盖)
    ORACLE导入导出
  • 原文地址:https://www.cnblogs.com/appleseed/p/1290746.html
Copyright © 2011-2022 走看看