Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > ASP/ASP.Net > Autocomplete Search với Jquery và Webservice
Autocomplete Search với Jquery và Webservice
Nguyễn Trung Hiếu
Share Code Web Company 2012

Autocomplete Search với Jquery và Webservice

Dùng google và facebook nhiều, bạn đã bao giờ để ý tới việc làm sao có thể làm được hệ thống tìm kiếm như 2 ông lớn đó.Vậy thì bạn nên đọc bài viết sau đây, tôi sẽ hướng dẫn bạn cách làm một hệ thống như vậy rất đơn giản với jquery và webservice

OK! không giới thiệu nhiều, bắt tay vào việc thôi:

I. Database

Thiết kế một cái database đơn giản chứ nhỉ:

Và sau đó là dữ liệu nữa chứ:

II. Webpage

Tiếp theo là phần css cho hệ thống của chúng ta.

Tiếp nữa là code HTML, độ khó tăng dần rồi đây:

OK! nhắc tới Jquery tại sao nãy giờ lại quên không đả động gì tới nó nhỉ, thêm đoạn này vào thẻ head nhé:

Rồi! đoạn này mới khó nè. Chúng ta phải viết một hàm trong javascript để bắt sự kiện người dùng nhập ký tự tìm kiếm vào ô có id = txtSearch, để nếu có giá trị thì sẽ cho phép thẻ divResult hiện ra, còn không thì cho nó ẩn đi.

III. Webservice

Xong đoạn trình hiển thị rồi, giờ là công đoạn tạo webservice để thực hiện truy vấn tìm kiếm dữ liệu trong csdl
1- Vào visual studio, tạo một webservice có tên là Webservice.asmx
2- Khai báo lớp toàn cục searchResult như sau:

3- Bạn phải thêm dòng sau để webservice có thể gọi được script ngoài webpage:

4- Thêm dòng sau để webservice có thể sử dụng class searchResult mà chúng ta vừa định nghĩa:

5- Khai báo một phương thức tìm kiếm dưới thẻ [webmethod]

6- Và đoạn code thực hiện việc tìm kiếm trong csdl:

7- Gọi webservice sử dụng jquery ở trên:

8- Debug và tận hưởng thành quả đi nào!
Chú ý nhỏ: Các bạn chú ý là cái đoạn:
System.Web.Configuration.WebConfigurationManager.ConnectionStrings[“conn”].ConnectionString; là một dòng nhé, mình enter nó xuống để nó khỏi bị vỡ khung ấy mà!

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}

Blog Stats

  • 5.753 hits
%d bloggers like this: