Trong bài viết này tôi sẽ hướng dẫn bạn sử dụng thư viện jquery và jquery.autocomplate trong trang asp.net có kết nối và lấy dữ liệu từ SQL server. Trong bài viết này tôi vẫn sử dụng cơ sở dữ liệu QuanLyThuVien mà tôi đang sử dụng trong các bài viết về Quản lý thư viện.
Trước tiên bạn cần download các thư viện của jquery cần thiết:
- Download jQuery
- Download jQuery AutoComplete Plugin
(Hoặc bạn có thể download đầy đủ thư viện và code của bài viết ở liên kết cuối bài viết này).
Tiếp theo bạn tạo một file .ashx (Generic Hander) ở đây tôi tạo là DemoAutoComplate.ashx. Trong file này bạn viết hàm để truy vấn dữ liệu như sau (Trong ví dụ này tôi sử dụng dữ liệu của bảng TB_Chuyên mục làm minh họa):
<%@ WebHandler Language="C#" Class="DemoAutoComplate" %>
using System;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.Text;
public class DemoAutoComplate : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string prefixText = context.Request.QueryString["q"];
string ConnectionString = @"Server =.\SQL2005;
Initial Catalog=QuanLyThuVien;User ID=sa;Password=sa";
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConnectionString;
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "select TenChuyenMuc from TB_ChuyenMuc where " +
"TenChuyenMuc like @SearchText + '%'";
cmd.Parameters.AddWithValue("@SearchText", prefixText);
cmd.Connection = conn;
StringBuilder sb = new StringBuilder();
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
sb.Append(sdr["TenChuyenMuc"])
.Append(Environment.NewLine);
}
}
conn.Close();
context.Response.Write(sb.ToString());
}
}
}
public bool IsReusable {
get {
return false;
}
}
}
Trong trang asp.net bạn muốn tạo autocomplate cho một Textbox bạn thực hiện như sau (Ở đây tôi minh họa bằng trang JqueryAutocomplate.aspx):
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryAutocomplate.aspx.cs" Inherits="JqueryAutocomplate" %>
<!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">
<link href="jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="jquery.autocomplete.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#<%=txtTenChuyenMuc.ClientID%>").autocomplete(' DemoAutoComplate.ashx');
});
</script>
<title>Công Nghệ DotNet</title>
</head>
<body>
<form id="form1" runat="server">
<div>
Tên chuyên mục: <asp:TextBox ID="txtTenChuyenMuc" runat="server" />
</div>
</form>
</body>
</html>
Vậy là đã xong. Giờ bạn có thể chạy thử.