這兩天在找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()