close

這兩天在找autocomplete自動完成的範例來實作看看

找到兩位大大的文章對我蠻有幫助的,以下是他們的網址

黑暗執行緒大大寫的:jQuery自動完成懶人包 

wmh大大寫的:Autocomplete - 自動完成文字輸入

這兩篇文章來實作出來

 

基本上,如果引用了最原始的autocomplete的js檔的話,在輸入中文會有問題

但小弟的js還不夠好,所以小弟是直接引用黑暗執行緖大大的js檔來實作。

好了,廢話不多說,就來看一下程式內容吧…此實作是連到資料庫去抓資料的。

 

第一支檔案 auto.aspx 步驟如下:

1. 在<head></head>之間引用js檔

<script type="text/javascript" language="javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.autocomplete.js"></script>
<link rel="Stylesheet" type="text/css" href="css/jquery.autocomplete.css" />

2. 在<head></head>之間加入jquery的code

<script type="text/javascript" language="javascript">
    $(function() {
    $("#input_box").autocomplete('auto2.aspx',{delay:10});
    });
</script>

3.在<body></body>之間加入一個  TextBox 控制項 名稱為「input_box」,名稱要跟jquery的code裡面的$("#input_box")一樣

 

第二支檔案 auto2.aspx 步驟如下:

1. 引用下列lib

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

 

2.在Page_load事件裡加入以下的code

Dim q As String = Server.UrlDecode(Request("q"))   '前端的TextBox會以 "q" 這個參數傳至後端
        Dim conn As New SqlConnection("你的連線字串")
        conn.Open()

        Dim dr As SqlDataReader = Nothing
        Dim myitem As New ListItem
        Dim cmd As New SqlCommand("你的sql查詢式", conn)
        dr = cmd.ExecuteReader

        If dr.HasRows Then
            While dr.Read

                Dim item As String = dr.Item(0) & vbCrLf    '因為我是用vb.net寫的,所以字串的斷行為vbCrLf,輸出必需為斷行輸出
                Response.Write(item)
            End While
        End If


        cmd.Cancel()
        dr.Close()
        conn.Close()

arrow
arrow
    全站熱搜

    suhsienchin 發表在 痞客邦 留言(1) 人氣()