Y大叔的筆記

年過40歲記不住了

2008-03-28

TextBox AutoSuggest

以兩個頁面做出類似奇摩搜尋的功能

以兩個頁面做出類似奇摩搜尋的功能

ajax.js

var objId;      //TextBox ID

//TextBox onkeyup 觸發的事件
function fAJAXRequest()
{  
    objId=window.event.srcElement.id;  
    var sTargetID="dv"+objId;
    var sURL="process.aspx";
        
    
    var e = document.getElementById( sTargetID );
    if(e)
    {    
     new oAJAXRequest(e,sURL,objId);
    }  
}

//清空結果
function ClearRequest()
{
    document.getElementById("dv"+objId).innerHTML="";  
}

//來自Process頁面取得結果，並將結果寫入目標DIV
function fAJAXStateChange( hAJAXRequest )
{
    if( hAJAXRequest && hAJAXRequest.mRequest && hAJAXRequest.mRequest.readyState == 4 )
    {
  var s = hAJAXRequest.mRequest.responseText;    
  hAJAXRequest.mhTarget.innerHTML = s;    
    }
}

//呼叫Process 頁面並執行搜尋
function oAJAXRequest(hTarget,sURL,txtId)
{
    var txtVal=document.getElementById(txtId).value;  
    if(document.getElementById(txtId).value!='')
    {
     var me = this;
     this.mRequest    = null;
     this.mhTarget    = hTarget;
     sURL=sURL+"?search="+txtVal+"&Id="+txtId+"&X="+event.screenX;      
     if( window.XMLHttpRequest )    //FF,NS,OP,IE7
     {
      this.mRequest = new XMLHttpRequest();
     }
     else
     if( window.ActiveXObject )    //IE5 & 6
     {
      this.mRequest = new ActiveXObject("Microsoft.XMLHTTP");
     }      
     if( this.mRequest )
     {
      this.mRequest.open( 'GET', sURL , true );
      this.mRequest.onreadystatechange = function(){ fAJAXStateChange(me); };
      this.mRequest.send( null );
     }
    }
    else
    {
    ClearRequest();      
    }
}

 


 

Default.aspx 搜尋頁面

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>未命名頁面</title>

    <script type="text/javascript" src="JS/ajax.js" language="javascript"></script>

    <script type="text/javascript" language="javascript">        
        
        //秀出結果 -來自Process.aspx的 dvResult
        function Fill(val,id)
        {
            document.getElementById(id).value=val;            
            ClearRequest();            
        }
        
        //清空結果
        function Vanish()
        {
            ClearRequest();            
        }  
              
    </script>

</head>
<body style="font-family: Tahoma; font-size: smaller;">
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <th>
                    </th>
                </tr>
                <tr>
                    <td>
                        搜尋:<asp:TextBox ID="txtSearchText" runat="server" Width="200px"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="dvtxtSearchText" style="width: 100%">
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

 

 

Default.aspx.vb


Partial Class Default2
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            txtSearchText.Attributes.Add("onkeyup", "return fAJAXRequest();")
            txtSearchText.Focus()
        End If
    End Sub
End Class

 

 

Process.aspx 回傳結果頁面

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Process.aspx.vb" Inherits="Process" %>

<html >
<body>
   <div id="dvResult" style=" border-right: dimgray 1px solid; border-top: dimgray 1px solid; border-left: dimgray 1px solid; border-bottom: dimgray 1px solid;" runat="server">          
    </div>    
</body>
</html>

 

 

Process.aspx.vb

Imports System.Web.UI.HtmlControls
Imports System.Data.SqlClient

Partial Class Process
    Inherits System.Web.UI.Page

    Dim result As String
    Dim xCord As String
    Dim Id As String

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Me.IsPostBack Then
            result = ""
            xCord = Request.QueryString("X").ToString
            Id = Request.QueryString("Id").ToString
        End If

        Dim searchCrit As String = Request.QueryString("search").ToString
        Dim query As String = "select top 10 * from Orders where OrderID like '" & searchCrit & "%'"
        Using conn As New SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings("NorthwindConnectionString1").ConnectionString)
            conn.Open()
            Using command As New SqlCommand
                With command
                    .Connection = conn
                    .CommandText = query
                    Dim ds As Data.DataSet = New Data.DataSet
                    Dim dt As SqlDataAdapter = New SqlDataAdapter(command)
                    dt.Fill(ds)
                    If ds.Tables(0).Rows.Count > 0 Then
                        result &= "<div >"
                        For i As Integer = 0 To ds.Tables(0).Rows.Count - 1
                            result &= "<div id=lp" & i & "><a href=javascript:Fill('" & ds.Tables(0).Rows(i)("OrderID").ToString & "','" & Id & "') style='text-decoration:none;'>" & _
                            Replace(ds.Tables(0).Rows(i)("OrderID").ToString, searchCrit, "<font color='red'>" & searchCrit & "</font>") & "</a></div>"
                        Next
                        result &= "</div>"
                    End If
                    dvResult.InnerHtml = result
                End With
            End Using

        End Using
    End Sub
End Class

參考至：http://www.codeproject.com/KB/aspnet/ASP.NET___AJAX.aspx

標籤雲

系列文章