Xây dựng tính năng gợi ý tìm kiếm (Auto complete search) trong Asp.Net

Một tính năng rất hay được khá nhiều website áp dụng khi xử lý tìm kiếm đó là gợi ý tìm kiếm (Auto complete Search), khi gõ một vài ký tự đầu của một từ khóa trên website sẽ hiện ra droplist một số nội dung liên quan đến từ khóa cho người dùng lựa chọn, ở bài này tôi sẽ làm một ví dụ nhỏ trên Asp.net. 

1. Database

Trong ví dụ này tôi sẽ thực hiện việc tìm kiếm trên cơ sở dữ liệu, nên việc đâu tiên sẽ tạo một dữ liệu demo. Các bạn hãy tạo một csdl mới, thêm table và nhập một số dữ liệu test như sau

Để thực hiện tim kiếm trên bảng trên, chúng ta hãy tạo một store procedure

--@date: 31/10/2013
--@author: thuyvk
--@des: search title article
create procedure [dbo].[sp_ArticleSearch]
@NameArticle nvarchar(200)
as
begin
select *
from Article
where NameArticle like N'%' + @NameArticle + '%'
end

2. Code

Sau khi hoàn thành các bước chuẩn bị csdl, các bạn hãy tạo một project theo cấu trúc như sau

Trong ví dụ này, tôi sử dụng LinQ, các bạn có thể download mã nguồn đầy đủ ở cuối bài viết để tiện tham khảo. Ở file DataClasses.dbml ta kéo table và store chúng ta vừa tạo vào

Ở trang Default.aspx, ta thêm mã như sau

- Trong phần <header>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".txtSearch").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "Default.aspx/SearchAjax",
                        data: "{ 'article': '" + request.term + "' }",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        dataFilter: function (data) { return data; },
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    value: item.NameArticle
                                }
                            }))
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus);
                        }
                    });
                },
                minLength: 2
            });
        });
    </script>

- Trong phần <body> của trang Default.aspx

<body>
    <form id="form1" runat="server">
        <div class="wrapper">
            <h1>Demo Ajax Search Auto Complate in .Net</h1>
        </div>
        <div class="wrapper">
            <p>Nhập từ khóa tìm kiếm:</p>
        </div>
        <div class="wrapper">
            <asp:TextBox ID="txtSearch" CssClass="txtSearch" runat="server"></asp:TextBox>
        </div>
    </form>
</body>

- Ở ví dụ này, chúng ta sẽ dùng jquery để lấy dữ liệu từ sever và hiện thông tin gợi ý, chúng ta cần viết một webservice để thực hiện việc này, trong trang Default.aspx.cs ta thêm mã như sau

[WebMethod]
    public static List<sp_ArticleSearchResult> SearchAjax(string article)
    {
        DataClassesDataContext db = new DataClassesDataContext(ConfigurationManager.ConnectionStrings["SampleConnectionString"].ConnectionString);
        var ls = new List<sp_ArticleSearchResult>();
        ls = db.sp_ArticleSearch(article).ToList();
        return ls;
    }
}

- Chú ý cần sử dụng thêm 2 thư viện

using System.Web.Services;
using System.Configuration;

- Vậy là xong, chúng ta hãy chạy thử ví dụ để xem kết quả

Các bạn có thể download mã nguồn ở file đính kèm cuối bài viết, chúc các bạn thành công!

Download Source

Related Post


Sử dụng Ajax trong website Asp.Net
Sunday, October 27, 2013
Ajax được giới thiệu lần đầu tiên vào ngày 18/02/2005 trong một bài báo có tên AJAX : A New Approach to Web Applications của tác giả Jesse James Garrett, công ty AdapativePath. Ngay sau đó thuật ngữ AJAX được phổ biến cực kỳ nhanh chóng trong cộng đồng phát triển Web và cho đến nay nó là một trong những từ khóa được tìm kiếm nhiều nhất trên Internet.
Sử dụng nén Gzip cho website Asp.net
Friday, October 25, 2013
Ở bài trước, tôi đã giới thiệu về cách tối ưu hóa Html,Css & Javascript để giảm dung lượng và tăng tốc độ tải của website, ở bài này chúng ta sẽ tìm hiểu về tính năng nén Gzip hiện tại đang được áp dụng rất phổ biến và được cho là tối ưu nhất. Gzipping giảm thời gian đáp ứng các yêu cầu của client bằng cách nén các thông tin trả lời và giảm đươc 70% kích thước. Hầu hết 90% các giao tiếp trên Internet giữa các trình duyệt và máy chủ web đều sử dụng Gzip.
Search

Đăng ký nhận bài mới


Category

Blog Archive